Route e dati

Le pagine di un tema sono rotte ordinarie di React Router 8, registrate in app/routes.ts. I dati provengono dall’API Storefront tramite context.storefront — il client SDK che l’entry Worker mette su ogni contesto di caricamento della richiesta.

Loaders

app/routes/home.tsx

import { PRODUCTS_QUERY, type ProductsQueryData } from "../graphql/queries";
import type { Route } from "./+types/home";

export async function loader({ context }: Route.LoaderArgs) {
  return context.storefront.query<ProductsQueryData>(PRODUCTS_QUERY, {
    variables: { first: 12 },
  });
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const { shop, products } = loaderData;
  // …
}

Route.LoaderArgs / Route.ComponentProps provengono dal typegen di React Router (bun run typecheck lo esegue). Le query vivono come documenti #graphql in app/graphql/ — esegui bun run codegen per generare i tipi di risultato dallo schema del tuo shop.

Aggiunta di una rotta

Registralo in app/routes.ts, crea il modulo sotto app/routes/, e esporta un loader più un componente di default. Il catch-all $.tsx dello scaffold è il tuo 404 — mantienilo ultimo.

Contesto oltre i dati

context trasporta anche geo (geo visitatore tipizzato — non c’è request.cf in produzione) e la sessione. Vedi Sviluppo locale per le limitazioni di runtime.

Caching

Avvolgi le ricerche costose con i helper di cache da @kotao/storefront: CacheShort, CacheLong, CacheNone, CacheCustom e createWithCache controllano la strategia di cache per query; generateCacheControlHeader traduce una strategia in header di risposta.