Stage M1

apps/storefront/src/lib/api.ts

@@ -1,12 +1,12 @@
-import { createApiClient } from '@sport/api-client';
+import { createApiClient, type RequestOptions } from '@sport/api-client';
 
 import { clientEnv, getServerEnv } from './env';
 
 /**
  * Two clients, because the two runtimes have different needs:
  *
- *  - `serverApi` runs inside React Server Components and route handlers. In
- *    Docker it reaches the API container over the internal network, skipping
+ *  - `getServerApi()` runs inside React Server Components and route handlers.
+ *    In Docker it reaches the API container over the internal network, skipping
  *    the public hostname and TLS entirely.
  *  - `browserApi` runs in the browser, hits the public API and carries the
  *    access token.
@@ -17,8 +17,8 @@ import { clientEnv, getServerEnv } from './env';
 export function getServerApi() {
   return createApiClient({
     baseUrl: getServerEnv().API_INTERNAL_URL,
-    // Server-side requests are anonymous by default. Authenticated server
-    // fetches pass the token explicitly, per request, once auth lands.
+    // Server-side reads are anonymous. Authenticated server fetches will pass
+    // the token explicitly per request once auth lands.
   });
 }
 
@@ -26,3 +26,21 @@ export const browserApi = createApiClient({
   baseUrl: clientEnv.NEXT_PUBLIC_API_URL,
   getAccessToken: () => null, // wired to the auth store in the auth milestone
 });
+
+/**
+ * Caching policy for catalog reads, in one place.
+ *
+ * Tags let a future admin write invalidate exactly what changed via
+ * `revalidateTag` instead of waiting out a TTL. The durations are the
+ * *frontend's* policy and are deliberately independent of the API's own Redis
+ * TTLs — two layers, two decisions.
+ */
+export const CATALOG_CACHE: Record<
+  'navigation' | 'listing' | 'product' | 'collections',
+  RequestOptions
+> = {
+  navigation: { next: { revalidate: 900, tags: ['navigation'] } },
+  listing: { next: { revalidate: 60, tags: ['products'] } },
+  product: { next: { revalidate: 300, tags: ['products'] } },
+  collections: { next: { revalidate: 300, tags: ['collections'] } },
+};