import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Autentificarea automată a request-ului din iframe-ul Shopify
const { admin, session } = await authenticate.admin(request);
// Interogăm API-ul GraphQL al magazinului curent
const response = await admin.graphql(`
#graphql
query getProducts {
products(first: 10) {
edges {
node {
id
title
handle
}
}
}
}
`);
const responseJson = await response.json();
return json({
products: responseJson.data.products.edges,
shop: session.shop
});
};Am trecut recent o aplicație de gestiune a stocurilor prin furcile caudine ale review-ului Shopify pentru a o publica în App Store. Am folosit stack-ul lor oficial recomandat: Remix și Polaris. Deși pe hârtie totul sună perfect, în realitate te lovești de niște limitări destul de enervante. Am vrut să scriu despre asta ca să nu pierdeți și voi vreo două săptămâni încercând să înțelegeți de ce vă respinge aplicația.
De ce te obligă Shopify, practic, să folosești stack-ul ăsta?
Shopify nu o să-ți spună niciodată direct că ești obligat să folosești Polaris (sistemul lor de design) și Remix. Totuși, dacă încerci să treci de review cu o interfață custom scrisă în Tailwind sau Bootstrap, procesul va dura de trei ori mai mult. Review-erii lor sunt obsedați ca aplicațiile din magazin să arate exact ca parte integrantă din admin-ul Shopify.
Folosind Polaris, am economisit cam 30% din timpul de UI layout pentru că n-am stat să inventez tabele, butoane sau filtre. Primești totul gata făcut și arată curat.
Dar aici vine și marele trade-off: Polaris este incredibil de rigid. Dacă clientul tău vrea un flow de onboarding mai atipic sau un selector de produse cu un comportament custom, ai de luptat cu CSS-ul și cu structura React până îți vine să-ți bagi picioarele. Nu ai flexibilitate. Ori joci după regulile lor, ori UI-ul tău se va sparge la primul update de design din admin.
Remix și coșmarul numit App Bridge
De când Shopify a mutat template-urile oficiale pe Remix, partea de backend și autentificare a devenit mult mai simplă. Loader-ele din Remix se ocupă excelent de verificarea sesiunii prin @shopify/shopify-app-remix.
Problema apare când trebuie să comunici între iframe-ul în care rulează aplicația ta și restul admin-ului Shopify. Aici intervine App Bridge. Dacă vrei să deschizi un simplu modal nativ sau să arăți o notificare (Toast), trebuie să folosești API-ul lor de client. Partea proastă? Documentația lor pentru App Bridge v4 este încă plină de lacune, iar multe exemple vechi de pe Stack Overflow pur și simplu nu mai funcționează.
De ce ne-au picat review-ul de 3 ori (și cum să eviți asta)
Review-ul Shopify este manual și extrem de riguros. Iată unde ne-am blocat noi, la un proiect testat pe un magazin de dezvoltare cu peste 12k de produse:
- Lipsa CSP (Content Security Policy) headers: Remix nu le configurează perfect default pentru Shopify. Dacă nu ai headerele corecte care să permită încărcarea aplicației doar în iframe-ul Shopify, ești respins instant.
- Sistemul de Billing: Am încercat să folosim un sistem extern de plăți (Stripe) pentru că era mai simplu pentru noi. Nu ai voie. Dacă vinzi servicii direct legate de magazin, ești obligat să folosești API-ul lor de Billing. Am pierdut 3 zile rescriind logica de subscripții.
- Butoane care nu păreau native: Am avut un buton de "Delete" care era roșu, dar nu folosea varianta
destructivedin Polaris. Respins. Totul trebuie să respecte ghidul lor de interfață până la ultimul pixel.
Merită efortul? Dacă vrei să vinzi în App Store-ul lor și să ai acces la milioanele de comercianți, da. Remix + Polaris îți oferă un bilet de intrare rapid, chiar dacă te simți legat de mâini și de picioare pe partea de design.
Voi ce experiențe ați avut cu procesul lor de aprobare? Au devenit mai relaxați sau tot la fel de stricți sunt pe partea de UI consistency?