import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(
`#graphql
query getShopProducts {
products(first: 10) {
edges {
node {
id
title
status
}
}
}
}`
);
const responseJson = await response.json();
return json({
shop: session.shop,
products: responseJson.data.products.edges,
});
};De ce Remix + Polaris e stack-ul "oficial" (și unde te lovești de zid)
Dacă vrei să scoți o aplicație în Shopify App Store, CLI-ul lor oficial te împinge direct spre Remix (subsumat mai nou în React Router) și kit-ul Polaris. N-are rost să te lupți cu morile de vânt încercând să faci un setup custom de Next.js. Template-ul oficial îți rezolvă din start infrastructura de OAuth, App Bridge și gestionarea sesiunilor.
La ultimul proiect — un app de gestiune de stocuri integrat pe 15 magazine cu volum mediu — am mers exclusiv pe stack-ul ăsta și am economisit cam 40% din timpul de UI. Polaris îți oferă instant design-ul nativ din dashboard-ul Shopify. Merchant-ul nici nu realizează că a intrat într-o aplicație externă built de tine.
Dar există un trade-off clar. Polaris e un sistem de design gândit strict pentru spațiul de admin Shopify. Dacă ai de gând să refolosești componentele în afara acestui ecosistem — de exemplu pe un portal public de status sau o pagină de checkout custom — e extrem de greoi, rigid și arată complet scos din context fără layout-ul de admin.
Capcana iFrame-urilor și Cookie-urilor 3rd Party
Cea mai mare bătăie de cap când lucrezi cu Remix într-un Embedded App este cum gestionezi autentificarea prin OAuth și încărcarea în iframe. Safari (cu ITP activat) și Firefox blochează din start cookie-urile third-party.
Dacă nu configurezi corect App Bridge, te trezești rapid într-o buclă infinită de redirect-uri când merchant-ul deschide aplicația. Am pierdut o zi întreagă încercând să înțeleg de ce pe Chrome totul mergea brici, iar pe Safari clientului îi apărea un ecran alb. Soluția curată a fost să renunț complet la sesiunile bazate pe cookie-uri clasice pe client și să las App Bridge să injecteze token-uri JWT în header-ul fiecărui request interceptat de Remix loader-e.
Trecerea de Review-ul Shopify: La ce sunt obsedați
Echipa de review de la Shopify e extrem de meticuloasă și n-are nicio reținere să-ți respingă app-ul. Am trimis prima versiune marți, iar vineri am primit rejection. Au fost două motive aparent mărunte:
- Nu aveam o stare de "EmptyState" nativă din Polaris în ecranul principal când magazinul de test nu avea niciun produs generat.
- Când utilizatorul dădea click pe un link de suport către site-ul nostru, pagina se deschidea în interiorul iframe-ului din admin, în loc să deschidă un tab nou prin App Bridge Redirect.
Dacă vrei să treci din prima încercare și să nu pierzi 4-5 zile pe resubmit-uri sterile, ține minte regulile astea de aur:
- Folosește
Banner,SkeletonPageșiEmptyStatepeste tot unde aștepți date. Reviewerii testează aplicația pe magazine proaspăt create, fără date de test. - Testează aplicația din Shopify Mobile App. Peste 30% din verificările lor inițiale sunt făcute de pe dispozitive mobile.
- Tratează erorile de GraphQL vizibil. Dacă un query e refuzat din lipsă de scopuri (scopes), afișează o alertă clară cu buton de re-autorizare.
Remix + Polaris rămâne cea mai rapidă combinație pentru Shopify, dar te obligă să joci 100% după regulile lor vizuale și de securitate. Voi ce stack folosiți pentru aplicațiile embedded: ați rămas pe Node + React SPA clasic sau ați făcut tranziția spre Remix?