PrefetchedLoaders, then render with the matching loader component. The client reads the seeded cache, so the first paint has data and no loading state.
loaders/collection-loader
@replohq/sdk/loaders/collection-loader
Cached for: 60s
Exports
loaders/collection-products-loader
@replohq/sdk/loaders/collection-products-loader
Always present on the result:
id, handle, title, availableForSale, featuredImage, minPrice, maxPrice, compareAtMinPrice, compareAtMaxPrice, options, variants
Cached for: 60s
Exports
loaders/contentful-entries-loader
@replohq/sdk/loaders/contentful-entries-loader
includes. Response includes total/skip/limit.
Cached for: 60s
Exports
loaders/contentful-entry-loader
@replohq/sdk/loaders/contentful-entry-loader
includes.
Cached for: 60s
Exports
loaders/judgeme-review-aggregate-loader
@replohq/sdk/loaders/judgeme-review-aggregate-loader
Cached for: 60s
Exports
loaders/judgeme-reviews-loader
@replohq/sdk/loaders/judgeme-reviews-loader
Cached for: 60s
Exports
loaders/kaching-bundles-loader
@replohq/sdk/loaders/kaching-bundles-loader
shopify_apps_detect reports Kaching Bundles as detected. Render it with KachingBundlesLoader, which mounts Kaching’s own bundle widget and renders your children with the shopper’s pick as cart lines (variant, quantity, Kaching line attributes, optional selling plan) for useAddToCart. Kaching’s fetch reports Storefront failures as no deal, so the loader cannot distinguish the two. Kaching applies the discount at Shopify Checkout, so the cart shows it as a discount allocation.
Cached for: 300s
Exports
loaders/levanta-product-loader
@replohq/sdk/loaders/levanta-product-loader
Cached for: 60s
Exports
loaders/loox-review-aggregate-loader
@replohq/sdk/loaders/loox-review-aggregate-loader
Cached for: 60s
Exports
loaders/loox-reviews-loader
@replohq/sdk/loaders/loox-reviews-loader
Cached for: 60s
Exports
loaders/metaobject-loader
@replohq/sdk/loaders/metaobject-loader
type + handle (or by id) from the Storefront API. Use for reusable structured content a merchant models as a metaobject — size charts, ingredient lists, care instructions. Discover types first with shopify_metaobject_definitions_list. IMPORTANT: this only returns entries whose DEFINITION has storefront access PUBLIC_READ, which is NOT the default — check storefrontAccess before building a page around one, or the page will render empty.
Cached for: 300s
Exports
loaders/metaobjects-loader
@replohq/sdk/loaders/metaobjects-loader
type from the Storefront API with cursor pagination. Same storefront-access caveat as shopify_storefront.metaobject. Entries whose definition has the publishable capability are only returned once ACTIVE, so drafts will be missing.
Cached for: 300s
Exports
loaders/okendo-review-aggregate-loader
@replohq/sdk/loaders/okendo-review-aggregate-loader
Cached for: 60s
Exports
loaders/okendo-reviews-loader
@replohq/sdk/loaders/okendo-reviews-loader
Cached for: 60s
Exports
loaders/product-loader
@replohq/sdk/loaders/product-loader
Serves Replo Products and Shopify. Set loaderKey to choose the source.
Cached for: 60s
Shopify
Fetch a Shopify product by handle or product GID from Storefront API.
Cached for: 60s
Exports
loaders/rebuy-recommendations-loader
@replohq/sdk/loaders/rebuy-recommendations-loader
Always present on the result:
id, images
Cached for: 60s
Exports
loaders/reviews-io-review-aggregate-loader
@replohq/sdk/loaders/reviews-io-review-aggregate-loader
Cached for: 60s
Exports
loaders/reviews-io-reviews-loader
@replohq/sdk/loaders/reviews-io-reviews-loader
Cached for: 60s
Exports
loaders/smile-earning-rules-loader
@replohq/sdk/loaders/smile-earning-rules-loader
loaders/smile-rewards-loader
@replohq/sdk/loaders/smile-rewards-loader
loaders/smile-vip-tiers-loader
@replohq/sdk/loaders/smile-vip-tiers-loader
loaders/statsig-experiment-loader
@replohq/sdk/loaders/statsig-experiment-loader
Cached for: 0s
Exports
loaders/yotpo-review-aggregate-loader
@replohq/sdk/loaders/yotpo-review-aggregate-loader
Cached for: 60s
Exports
loaders/yotpo-reviews-loader
@replohq/sdk/loaders/yotpo-reviews-loader
Cached for: 60s
Exports
loaders/prefetch-loaders
@replohq/sdk/loaders/prefetch-loaders
PrefetchedLoaders
Server component that prefetches one or more loader queries and seeds the React Query cache via HydrationBoundary. Client components that use useSuspenseQuery with the same queryKey will get the data immediately in the initial HTML — no loading state on first paint.
The queryKey is derived internally as [loaderKey, args], matching the convention used by all loader components.
Usage:
loaders/invoke-loader-server
@replohq/sdk/loaders/invoke-loader-server
invokeLoaderServer
Server-only loader invocation that calls the canopy-api gateway directly. Used by PrefetchedLoaders to seed the React Query cache during SSR.
Results are cached via Next.js unstable_cache so repeated SSR renders for the same loader+args return instantly without a network round-trip to canopy-api. The canopy-api’s own in-memory cache still acts as a second layer for cold starts and cross-instance sharing.
A canopy 404 is cached as a not-found marker and rethrown as a 404 CanopyApiGatewayError, so a successful revalidation can displace a stale entry once the underlying data disappears (e.g. a product goes draft).
loaders/loader-keys
@replohq/sdk/loaders/loader-keys
DATA_LOADER_KEYS
Shared data-loader key constants. Loader components and prefetch queries import from here so the strings are never duplicated across a generated site.
These keys serve double duty: they identify which backend loader to invoke AND are used as React Query cache key prefixes. Loader components internally construct queryKey as [loaderKey, args].
Naming convention: <integration>.<objectType> or <integration>.<objectType>_<qualifier>.
loaders/loader-schemas
@replohq/sdk/loaders/loader-schemas
Exports
loaders/product-loader-args
@replohq/sdk/loaders/product-loader-args
buildProductLoaderArgs
Builds the single object used as BOTH the React Query key and the loader payload. They must stay identical: PrefetchedLoaders seeds the cache under [loaderKey, args], so an arg sent to the loader but missing from the key (or vice versa) silently misses the prefetch — the client refetches without it and the page renders incomplete data instead of erroring.
Keys left undefined drop out of React Query’s key hash, so omitting a field here hashes the same as a prefetch that never passed it.
loaders/collection-loader-args
@replohq/sdk/loaders/collection-loader-args
buildCollectionLoaderArgs
Builds the single object used as BOTH the React Query key and the loader payload. They must stay identical: PrefetchedLoaders seeds the cache under [loaderKey, args], so an arg sent to the loader but missing from the key (or vice versa) silently misses the prefetch.
Keys left undefined drop out of React Query’s key hash, so omitting a field here hashes the same as a prefetch that never passed it.
loaders/collection-products-loader-args
@replohq/sdk/loaders/collection-products-loader-args
buildCollectionProductsLoaderArgs
Builds the single object used as BOTH the React Query key and the loader payload. They must stay identical: PrefetchedLoaders seeds the cache under [loaderKey, args], so an arg sent to the loader but missing from the key (or vice versa) silently misses the prefetch.
Keys left undefined drop out of React Query’s key hash, so omitting a field here hashes the same as a prefetch that never passed it.
loaders/markets
@replohq/sdk/loaders/markets
Exports