Routen & Daten

Die Seiten eines Themes sind gewöhnliche React-Router-7-Routen, registriert in app/routes.ts. Daten kommen aus der Storefront-API über context.storefront — den SDK-Client, den der Worker-Entry auf jeden Request-Load-Context legt.

Loader

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 kommen aus dem React-Router-Typegen (bun run typecheck führt ihn aus). Queries liegen als #graphql-Dokumente in app/graphql/ — bun run codegen generiert Result-Typen aus dem Schema deines Shops.

Route hinzufügen

In app/routes.ts registrieren, Modul unter app/routes/ anlegen, loader plus Default-Komponente exportieren. Das Catch-all $.tsx des Scaffolds ist deine 404 — es bleibt am Ende.

Kontext jenseits der Daten

context trägt außerdem geo (typisierte Besucher-Geodaten — in Produktion gibt es kein request.cf) und die Session. Siehe Lokale Entwicklung für die Runtime-Regeln.

Caching

Teure Lookups mit den Cache-Helfern aus @kotao/storefront wrappen: CacheShort, CacheLong, CacheNone, CacheCustom und createWithCache steuern die Strategie pro Query; generateCacheControlHeader übersetzt eine Strategie in Response-Header.