Okendo Integration

Data Loading Pattern

Always use the prefetch pattern by default. The only exception is when data must be loaded dynamically in response to a client-side input or interaction.

The pattern has two layers:

1. Server component (page): Uses PrefetchedLoaders to fetch data during SSR and seed the React Query cache via HydrationBoundary. This ensures the first paint includes the data with no loading state.
2. Client component: Uses a loader component (e.g., OkendoReviewsLoader) with useSuspenseQuery under the hood. On initial render it reads the prefetched cache — instant. On subsequent client-side navigations or prop changes, it fetches fresh data automatically.

Discovering the Shopify Product ID

Okendo loaders require a numeric Shopify product ID (e.g. "12345"), not a Shopify GID. To get this:

1. Get the product's numeric ID from the Shopify admin (the number at the end of the product's admin URL), or ask a Replo session to look it up. Given a GID like gid://shopify/Product/12345, take the numeric portion.
2. Extract the numeric portion: const numericId = gid.split("/").pop().
3. Pass the numeric ID to Okendo loader components as shopifyProductId.