Choose a version:

createStorefrontClient

This function extends createStorefrontClient 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 createStorefrontClient
createStorefrontClient(
options
)

Anchor to createStorefrontClient-parametersParameters

Anchor to options options <TI18n> required

Anchor to createStorefrontClient-returnsReturns

CreateStorefrontClientOptions

HydrogenClientProps<TI18n> & StorefrontClientProps

HydrogenClientProps

storefrontHeaders
Storefront API headers. If on Oxygen, use `getStorefrontHeaders()`
```
StorefrontHeaders
```
cache
An instance that implements the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
```
Cache
```
storefrontId
The globally unique identifier for the Shop
```
string
```
waitUntil
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.
```
ExecutionContext
```
i18n
An object containing a country code and language code
```
TI18n
```

StorefrontHeaders

requestGroupId
A unique ID that correlates all sub-requests together.
```
string
```
buyerIp
The IP address of the client.
```
string
```
cookie
The cookie header from the client
```
string
```
purpose
The purpose header value for debugging
```
string
```

StorefrontClient

Wraps all the returned utilities from `createStorefrontClient`.

storefront
```
Storefront<TI18n>
```

Storefront

Interface to interact with the Storefront API.

query

The function to run a query on Storefront API.

<OverrideReturnType = any, RawGqlString extends string = string>(query: RawGqlString, ...options: RawGqlString extends never ? IsOptionalVariables<StorefrontQueries[RawGqlString]> extends true ? [StorefrontQuerySecondParam<RawGqlString>?] : [StorefrontQuerySecondParam<RawGqlString>] : [StorefrontQuerySecondParam<string>?]) => Promise<RawGqlString extends never ? StorefrontQueries[RawGqlString]["return"] : OverrideReturnType>

mutate

The function to run a mutation on Storefront API.

<OverrideReturnType = any, RawGqlString extends string = string>(mutation: RawGqlString, ...options: RawGqlString extends never ? IsOptionalVariables<StorefrontMutations[RawGqlString]> extends true ? [StorefrontMutateSecondParam<RawGqlString>?] : [StorefrontMutateSecondParam<RawGqlString>] : [StorefrontCommonOptions<{ readonly [variable: string]: unknown; }>?]) => Promise<RawGqlString extends never ? StorefrontMutations[RawGqlString]["return"] : OverrideReturnType>

cache
The cache instance passed in from the `createStorefrontClient` argument.
```
Cache
```
CacheNone
Re-export of [`CacheNone`](/docs/api/hydrogen/2023-10/utilities/cachenone).
```
() => NoStoreStrategy
```
CacheLong
Re-export of [`CacheLong`](/docs/api/hydrogen/2023-10/utilities/cachelong).
```
(overrideOptions?: AllCacheOptions) => AllCacheOptions
```
CacheShort
Re-export of [`CacheShort`](/docs/api/hydrogen/2023-10/utilities/cacheshort).
```
(overrideOptions?: AllCacheOptions) => AllCacheOptions
```
CacheCustom
Re-export of [`CacheCustom`](/docs/api/hydrogen/2023-10/utilities/cachecustom).
```
(overrideOptions: AllCacheOptions) => AllCacheOptions
```
generateCacheControlHeader
Re-export of [`generateCacheControlHeader`](/docs/api/hydrogen/2023-10/utilities/generatecachecontrolheader).
```
(cacheOptions: AllCacheOptions) => string
```
getPublicTokenHeaders
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/2023-10/utilities/createstorefrontclient#:~:text=%27graphql%27.-,getPublicTokenHeaders,-(props%3F%3A) for more details.
```
(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "publicStorefrontToken">) => Record<string, string>
```
getPrivateTokenHeaders
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/2023-10/utilities/createstorefrontclient#:~:text=storefrontApiVersion-,getPrivateTokenHeaders,-(props%3F%3A) for more details.
```
(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "privateStorefrontToken"> & { buyerIp?: string; }) => Record<string, string>
```
getShopifyDomain
Creates the fully-qualified URL to your myshopify.com domain. See [`getShopifyDomain` in Hydrogen React](/docs/api/hydrogen-react/2023-10/utilities/createstorefrontclient#:~:text=StorefrontClientReturn-,getShopifyDomain,-(props%3F%3A) for more details.
```
(props?: Partial<Pick<StorefrontClientProps, "storeDomain">>) => string
```
getApiUrl
Creates the fully-qualified URL to your store's GraphQL endpoint. See [`getStorefrontApiUrl` in Hydrogen React](/docs/api/hydrogen-react/2023-10/utilities/createstorefrontclient#:~:text=storeDomain-,getStorefrontApiUrl,-(props%3F%3A) for more details.
```
(props?: Partial<Pick<StorefrontClientProps, "storeDomain" | "storefrontApiVersion">>) => string
```
isApiError
Determines if the error is resulted from a Storefront API call.
```
(error: any) => boolean
```
i18n
The `i18n` object passed in from the `createStorefrontClient` argument.
```
TI18n
```

IsOptionalVariables

Omit<
  OperationTypeValue['variables'],
  AutoAddedVariableNames
> extends EmptyVariables
  ? true // No need to pass variables
  : GenericVariables extends OperationTypeValue['variables']
  ? true // We don't know what variables are needed
  : false

AutoAddedVariableNames

'country' | 'language'

EmptyVariables

GenericVariables

ExecutionArgs['variableValues']

StorefrontQueries

Maps all the queries found in the project to variables and return types.

StorefrontQuerySecondParam

(RawGqlString extends keyof StorefrontQueries
  ? StorefrontCommonOptions<StorefrontQueries[RawGqlString]['variables']>
  : StorefrontCommonOptions<GenericVariables>) & {cache?: CachingStrategy}

StorefrontCommonOptions

{
  headers?: HeadersInit;
  storefrontApiVersion?: string;
} & (IsOptionalVariables<{variables: Variables}> extends true
  ? {variables?: Variables}
  : {variables: Variables})

CachingStrategy

Use the `CachingStrategy` to define a custom caching mechanism for your data. Or use one of the pre-defined caching strategies: CacheNone, CacheShort, CacheLong.

mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
maxAge
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).
```
number
```
staleWhileRevalidate
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).
```
number
```
sMaxAge
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).
```
number
```
staleIfError
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).
```
number
```

StorefrontMutations

Maps all the mutations found in the project to variables and return types.

StorefrontMutateSecondParam

RawGqlString extends keyof StorefrontMutations
  ? StorefrontCommonOptions<StorefrontMutations[RawGqlString]['variables']>
  : StorefrontCommonOptions<GenericVariables>

NoStoreStrategy

mode
```
string
```

AllCacheOptions

Override options for a cache strategy.

mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
maxAge
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).
```
number
```
staleWhileRevalidate
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).
```
number
```
sMaxAge
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).
```
number
```
staleIfError
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).
```
number
```

I18nBase

language
```
LanguageCode
```
country
```
CountryCode
```

Examples

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);

};

Examples

Example code

Description

I am the default example

JavaScript

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);
  },
};

TypeScript

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);
  },
};