Initialize a Hydrogen storefront with createStorefrontClient and make an authenticated Storefront API request inside a Remix loader

In-depth guide

Steps

1. In your Hydrogen app server entry (typically server.ts) call createStorefrontClient with storeDomain, publicStorefrontToken (for client-side use), and privateStorefrontToken (for server-side use); these are set as Oxygen environment variables
2. The client returns a storefront object with storefront.query and storefront.mutate methods; pass the storefront through the Remix app context so loaders can access it
3. In a Remix loader use const { storefront } = context to get the client, then call const { product } = await storefront.query(PRODUCT_QUERY, { variables: { handle } }) where PRODUCT_QUERY is a tagged gql template string
4. Define PRODUCT_QUERY with the fields you need; the privateStorefrontToken is used automatically on the server so you don't need to pass an Authorization header manually — the client handles it
5. Return the data from the loader as json(data) and consume it in the route component with useLoaderData()
6. For caching annotate the query call with cache: storefront.CacheLong() or storefront.CacheShort() to control how Oxygen's edge cache stores the response