This function extends `createStorefrontClient` from [Hydrogen React](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient). The additional arguments enable internationalization (i18n), caching, and other features particular to Remix and Oxygen. Learn more about [data fetching in Hydrogen](/docs/custom-storefronts/hydrogen/data-fetching/fetch-data).
import {createStorefrontClient} from '@shopify/hydrogen';
import {
createRequestHandler,
getStorefrontHeaders,
} from '@shopify/remix-oxygen';
export default {
async fetch(request, env, executionContext) {
/* Create a Storefront client with your credentials and options */
const {storefront} = createStorefrontClient({
/* Cache API instance */
cache: await caches.open('hydrogen'),
/* Runtime utility in serverless environments */
waitUntil: (p) => executionContext.waitUntil(p),
/* Private Storefront API token for your store */
privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
/* Public Storefront API token for your store */
publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
/* Your store domain: "{shop}.myshopify.com" */
storeDomain: env.PUBLIC_STORE_DOMAIN,
/**
* Storefront API headers containing:
* - buyerIp: The IP address of the customer.
* - requestGroupId: A unique ID to group all the logs for this request.
* - cookie: The 'cookie' header from the request.
*/
storefrontHeaders: getStorefrontHeaders(request),
});
const handleRequest = createRequestHandler({
build: remixBuild,
mode: process.env.NODE_ENV,
/* Inject the Storefront client in the Remix context */
getLoadContext: () => ({storefront}),
});
return handleRequest(request);
},
};
import {createStorefrontClient} from '@shopify/hydrogen';
import * as remixBuild from '@remix-run/dev/server-build';
import {
createRequestHandler,
getStorefrontHeaders,
} from '@shopify/remix-oxygen';
export default {
async fetch(
request: Request,
env: Record<string, string>,
executionContext: ExecutionContext,
) {
/* Create a Storefront client with your credentials and options */
const {storefront} = createStorefrontClient({
/* Cache API instance */
cache: await caches.open('hydrogen'),
/* Runtime utility in serverless environments */
waitUntil: (p: Promise<unknown>) => executionContext.waitUntil(p),
/* Private Storefront API token for your store */
privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
/* Public Storefront API token for your store */
publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
/* Your store domain: "{shop}.myshopify.com" */
storeDomain: env.PUBLIC_STORE_DOMAIN,
/**
* Storefront API headers containing:
* - buyerIp: The IP address of the customer.
* - requestGroupId: A unique ID to group all the logs for this request.
* - cookie: The 'cookie' header from the request.
*/
storefrontHeaders: getStorefrontHeaders(request),
});
const handleRequest = createRequestHandler({
build: remixBuild,
mode: process.env.NODE_ENV,
/* Inject the Storefront client in the Remix context */
getLoadContext: () => ({storefront}),
});
return handleRequest(request);
},
};
HydrogenClientProps<TI18n> & StorefrontClientProps
An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
An object containing a country code and language code
Whether it should print GraphQL errors automatically. Defaults to true
Storefront API headers. If on Oxygen, use `getStorefrontHeaders()`
The globally unique identifier for the Shop
The `waitUntil` function is used to keep the current request/response lifecycle alive even after a response has been sent. It should be provided by your platform.
The cache instance passed in from the `createStorefrontClient` argument.
Re-export of [`CacheCustom`](/docs/api/hydrogen/2024-10/utilities/cachecustom).
Re-export of [`CacheLong`](/docs/api/hydrogen/2024-10/utilities/cachelong).
Re-export of [`CacheNone`](/docs/api/hydrogen/2024-10/utilities/cachenone).
Re-export of [`CacheShort`](/docs/api/hydrogen/2024-10/utilities/cacheshort).
Re-export of [`generateCacheControlHeader`](/docs/api/hydrogen/2024-10/utilities/generatecachecontrolheader).
Creates the fully-qualified URL to your store's GraphQL endpoint. See [`getStorefrontApiUrl` in Hydrogen React](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient#:~:text=storeDomain-,getStorefrontApiUrl,-(props%3F%3A) for more details.
Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint for API calls made from a server. See [`getPrivateTokenHeaders` in Hydrogen React](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient#:~:text=storefrontApiVersion-,getPrivateTokenHeaders,-(props%3F%3A) for more details.
Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. See [`getPublicTokenHeaders` in Hydrogen React](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient#:~:text=%27graphql%27.-,getPublicTokenHeaders,-(props%3F%3A) for more details.
Creates the fully-qualified URL to your myshopify.com domain. See [`getShopifyDomain` in Hydrogen React](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient#:~:text=StorefrontClientReturn-,getShopifyDomain,-(props%3F%3A) for more details.
The `i18n` object passed in from the `createStorefrontClient` argument.
The function to run a mutation on Storefront API.
The function to run a query on Storefront API.
Override options for a cache strategy.
The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
The caching mode, generally `public`, `private`, or `no-store`.
Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).
The name of the query for debugging in the Subrequest Profiler.
Additional headers for this query.
Override the Storefront API version for this query.
The variables for the GraphQL mutation statement.
JsonGraphQLError[] | undefined
ReturnType<GraphQLError['toJSON']>
The cache strategy for this query. Default to max-age=1, stale-while-revalidate=86399.
The name of the query for debugging in the Subrequest Profiler.
Additional headers for this query.
Override the Storefront API version for this query.
The variables for the GraphQL query statement.
Use the `CachingStrategy` to define a custom caching mechanism for your data. Or use one of the pre-defined caching strategies: CacheNone, CacheShort, CacheLong.
The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
The caching mode, generally `public`, `private`, or `no-store`.
Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).