import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { Page, Layout, Card, Text, BlockStack } from "@shopify/polaris";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(`
#graphql
query getShopDetails {
shop {
name
currencyCode
}
}
`);
const data = await response.json();
return json({ shop: data.data.shop, domain: session.shop });
};
export default function Index() {
const { shop, domain } = useLoaderData<typeof loader>();
return (
<Page title="Dashboard Aplicație">
<Layout>
<Layout.Section>
<Card>
<BlockStack gap="300">
<Text as="h2" variant="headingMd">
Magazin conectat: {shop.name}
</Text>
<Text as="p" variant="bodyMd">
Domeniu activ: {domain} ({shop.currencyCode})
</Text>
</BlockStack>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Anul trecut am migrat o aplicație de upsell de la vechiul setup de Express cu React direct la stiva oficială propusă de Shopify: Remix + Polaris v12. Avem în jur de 8.000 de comercianți activi și aveam nevoie de mai multă stabilitate la spike-urile de Black Friday. Dacă vrei să scoți o aplicație publică în App Store, combinația asta e calea de rezistență minimă, dar procesul de review rămâne un câmp de mine dacă nu ești atent.
De ce Remix și Polaris au devenit standardul
Când au lansat pachetul @shopify/shopify-app-remix, au rezolvat cea mai mare problemă pe care o aveam în trecut: gestionarea token-urilor de sesiune în iframe-ul din adminul Shopify. Înainte făceam tumbe cu cookie-uri third-party și scripturi de App Bridge puse cu mâna care crăpau la fiecare update de Chrome.
Cu Remix, SSR-ul se întâmplă direct în interiorul contextului autentificat. Când comerciantul deschide aplicația, loader-ul din Remix validează HMAC-ul, extrage session token-ul și-ți dă acces la GraphQL Admin API fără niciun flickering de redirecționare.
Trade-off-ul real cu Polaris
Design system-ul Polaris e o sabie cu două tăișuri. Pe de o parte, treci de revizia de UI instant. Reviewerii de la Shopify adoră să vadă componente standard precum <Page>, <Layout>, <BlockStack> sau <DataTable>. Aplicația arată ca o extensie nativă a adminului, iar asta crește rata de conversie când comerciantul o instalează.
Pe de altă parte, Polaris e extrem de rigid. Dacă clientul sau designerul tău vrea un dashboard cu grafice atipice, animații custom sau un branding diferit de griul și verdele clasic Shopify, te prinzi repede de limite. A trebuit să suprascriem CSS variables în câteva locuri și am regretat imediat când au dat ei un update minor care ne-a stricat spacing-ul peste noapte. Regula mea acum: dacă e în iframe-ul de admin, folosești Polaris 100% așa cum e oferit, fără stiluri custom.
Unde am pierdut 4 zile la App Review
Cred că nimeni nu trece din prima de Shopify App Review. La noi, deși codul era curat, am luat reject din două motive stupide:
- GDPR Webhooks neimplementate corect: Chiar dacă app-ul tău nu stochează date cu caracter personal, trebuie să răspunzi la webhook-urile
CUSTOMERS_DATA_REQUEST,CUSTOMERS_REDACTșiSHOP_REDACTcu status 200 OK. Noi returnam 404 pe endpoint-urile alea goale. - Erori neprinse la dezinstalare: Când cineva dă Uninstall, Shopify îți invalidează imediat token-urile. Dintr-un background job care încă încerca să sincronizeze stocul am aruncat o eroare neprinsă care a generat alertă în log-urile lor de test.
Dacă rezolvi webhook-urile, pui un fallback de încărcare rapid cu Skeleton display din Polaris și nu folosești redirecționări de URL complete în iframe, scapi în maxim două runde de review.
Concluzie
Remix cu Polaris e cel mai rapid mod de a lansa un Shopify App stabil. Câștigi o grămadă de timp pe partea de auth și arhitectură, dar plătești prin lipsa de flexibilitate vizuală. Voi ce experiențe ați avut recent cu echipa lor de App Review? Cât a durat cel mai mult până v-au aprobat o aplicație?