create
utility
This function extends from Hydrogen React.
The additional arguments enable internationalization (i18n), caching, and other features particular to Remix and Oxygen.
Learn more about data fetching in Hydrogen.
Anchor to parametersParameters
HydrogenClientProps<TI18n> & StorefrontClientPropsAnchor to HydrogenClientProps
HydrogenClientProps
Anchor to cache
cache
Cache
An instance that implements the Cache API
Anchor to i18n
i18n
TI18n
An object containing a country code and language code
Anchor to logErrors
logErrors
boolean | ((error?: Error) => boolean)
Whether it should print GraphQL errors automatically. Defaults to true
Anchor to storefrontHeaders
storefrontHeaders
StorefrontHeaders
Storefront API headers. If on Oxygen, use
Anchor to storefrontId
storefrontId
string
The globally unique identifier for the Shop
Anchor to waitUntil
waitUntil
WaitUntil
The 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.
Was this section helpful?
Anchor to returnsReturns
Anchor to storefront
storefront
<TI18n>
Was this section helpful?
Example code
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);
},
};
