import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Funcția de authenticate validează automat token-ul de sesiune în iframe
const { admin, session } = await authenticate.admin(request);
try {
const response = await admin.graphql(`
query getShopInfo {
shop {
name
primaryDomain {
url
}
}
}
`);
const responseJson = await response.json();
return json({ shop: responseJson.data.shop });
} catch (error) {
throw new Response("Eroare la preluarea datelor din Shopify", { status: 500 });
}
};Salutare! Dacă vrei să lansezi o aplicație în Shopify App Store, combinația oficială de Remix și Polaris este acum calea standard recomandată de ei. Am trecut recent prin procesul ăsta cu un app de gestiune a stocurilor pentru un client cu 12k produse în portofoliu și vreau să vă împărtășesc ce am învățat, mai ales că review-ul celor de la Shopify a devenit extrem de riguros.
Nu vă lăsați păcăliți de template-ul lor de pornire; deși pare că totul merge la prima cheie, în producție lucrurile se complică rapid.
De ce Remix și Polaris? (Și compromisul pe care îl faci)
Shopify a îngropat vechiul template de React + Node în favoarea Remix. Decizia e excelentă pentru performanță: randarea pe server (SSR) ajută mult la viteza de încărcare în admin-ul comerciantului. Polaris, pe de altă parte, este librăria lor de componente React.
Avantajul e clar: aplicația ta arată exact ca o secțiune nativă din Shopify. Comerciantul nu simte că folosește un tool extern.
Dezavantajul? Polaris este extrem de rigid. Dacă vrei să faci un layout mai atipic sau să personalizezi branding-ul aplicației tale, te vei bate cu CSS-ul lor și cu sistemul de design. Am pierdut vreo 6 ore doar încercând să aliniez un set de carduri custom într-un mod care nu era prevăzut în ghidul lor de design. Sfatul meu: mergi pe mâna componentelor standard și nu încerca să fii prea creativ.
Problema cu Safari și cookie-urile third-party
Aplicațiile de Shopify rulează într-un iframe în interiorul adminului Shopify. Asta înseamnă că browserul tău blochează implicit cookie-urile de sesiune în Safari sau pe browserele cu protecție strictă (incognito).
Template-ul de Remix folosește App Bridge pentru a trece token-ul de sesiune prin headerele HTTP, dar dacă ai rute care nu trec prin acest middleware, te vei trezi cu ecrane albe și loop-uri de redirect. Am pățit asta pe pagina de setări unde făceam un apel direct către un API extern. Soluția este să folosești mereu fetch-ul wrappuit din App Bridge (useSubmit sau useFetcher din Remix, configurate cu headerul de autorizare).
Cum am fost respins de 3 ori la review-ul Shopify
QA-ul de la Shopify este format din oameni reali care îți testează aplicația la sânge. Nu e doar un bot automantizat. Procesul a durat 9 zile în total. Iată de ce ne-au respins aplicația:
- Lipsa stării de încărcare (Loading States): Polaris are o componentă numită
SkeletonPage. Dacă ai un loader în Remix care durează mai mult de 1 secundă și ecranul rămâne gol fără un schelet de încărcare, te vor respinge. Am rezolvat asta folosind<Suspense>din React. - Gestionarea dezinstalării: Când un client dezinstalează aplicația, trebuie să îi ștergi datele din baza de date conform GDPR. Shopify trimite un webhook (
app/uninstalled). Dacă webhook-ul tău returnează 500 (am avut un bug de conexiune la DB în prima zi de teste), aplicația nu trece de review. - Testarea pe mobil: Chiar dacă e un app de admin, testerii Shopify o vor deschide din aplicația lor de mobil (Shopify Mobile). Dacă un tabel Polaris nu este responsive și iese din ecran, primești reject instant.
Concluzie
Remix + Polaris este cel mai bun setup actual, dar te obligă să joci după regulile Shopify. Dacă ai un design foarte specific, s-ar putea să te enerveze Polaris. Dacă vrei doar să livrezi rapid un produs integrat perfect, e calea ideală.
Ați trecut recent prin procesul de review la Shopify? Cât a durat la voi aprobarea?