Choose a version:

storefrontRedirect

Queries the Storefront API to see if there is any redirect created for the current route and performs it. Otherwise, it returns the response passed in the parameters. Useful for conditionally redirecting after a 404 response.

Anchor to storefrontRedirect
storefrontRedirect(
options
)

Anchor to storefrontRedirect-parametersParameters

Anchor to options options required

Anchor to storefrontRedirect-returnsReturns

Promise<Response>

StorefrontRedirect

matchQueryParams
By default, query parameters are not used to match redirects. Set this to `true` if you'd like redirects to be query parameter sensitive
```
boolean
```
noAdminRedirect
By default the `/admin` route is redirected to the Shopify Admin page for the current storefront. Disable this redirect by passing `true`.
```
boolean
```
request
The [MDN Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object that was passed to the `server.ts` request handler.
```
Request
```
response
The [MDN Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) object created by `handleRequest`
```
Response
```
storefront
The [Storefront client](/docs/api/hydrogen/utilities/createstorefrontclient) instance
```
Storefront<I18nBase>
```

Storefront

Interface to interact with the Storefront API.

cache
The **`Cache`** interface provides a persistent storage mechanism for Request / Response object pairs that are cached in long lived memory. Available only in secure contexts. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Cache)
```
Cache
```

CacheCustom

(overrideOptions: AllCacheOptions) => AllCacheOptions

CacheLong

(overrideOptions?: AllCacheOptions) => AllCacheOptions

CacheNone
```
() => NoStoreStrategy
```

CacheShort

(overrideOptions?: AllCacheOptions) => AllCacheOptions

forward

Forwards the request to the Storefront API. It reads the API version from the request URL.

(request: Request, options?: Pick<StorefrontCommonExtraParams, "storefrontApiVersion">) => Promise<Response>

forwardMcp
Forwards the request to the Storefront MCP endpoint.
```
(request: Request) => Promise<Response>
```

generateCacheControlHeader

(cacheOptions: AllCacheOptions) => string

getApiUrl

(props?: Partial<Pick<StorefrontClientProps, "storefrontApiVersion" | "storeDomain">>) => string

getHeaders
```
() => Record<string, string>
```

getPrivateTokenHeaders

(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "privateStorefrontToken"> & { buyerIp?: string; }) => Record<string, string>

getPublicTokenHeaders

(props?: Partial<Pick<StorefrontClientProps, "contentType">> & Pick<StorefrontClientProps, "publicStorefrontToken">) => Record<string, string>

getShopifyDomain

(props?: Partial<Pick<StorefrontClientProps, "storeDomain">>) => string

i18n
```
TI18n
```
isMcpUrl
Checks if the request URL matches the Storefront MCP endpoint.
```
(request: { url?: string; }) => boolean
```
isStorefrontApiUrl
Checks if the request URL matches the Storefront API GraphQL endpoint.
```
(request: { url?: string; }) => boolean
```

mutate

<
    OverrideReturnType extends any = never,
    RawGqlString extends string = string,
  >(
    mutation: RawGqlString,
    ...options: ClientVariablesInRestParams<
      StorefrontMutations,
      RawGqlString,
      StorefrontCommonExtraParams,
      AutoAddedVariableNames
    >
  ) => Promise<
    ClientReturn<StorefrontMutations, RawGqlString, OverrideReturnType> &
      StorefrontError
  >

query

<
    OverrideReturnType extends any = never,
    RawGqlString extends string = string,
  >(
    query: RawGqlString,
    ...options: ClientVariablesInRestParams<
      StorefrontQueries,
      RawGqlString,
      StorefrontCommonExtraParams & Pick<StorefrontQueryOptions, 'cache'>,
      AutoAddedVariableNames
    >
  ) => Promise<
    ClientReturn<StorefrontQueries, RawGqlString, OverrideReturnType> &
      StorefrontError
  >

setCollectedSubrequestHeaders
Sets the collected subrequest headers in the response. Useful to forward the cookies and server-timing headers from server subrequests to the browser.
```
(response: { headers: Headers; }) => void
```

AllCacheOptions

Override options for a cache strategy.

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
```
mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
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
```
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
```

NoStoreStrategy

mode
```
string
```

StorefrontCommonExtraParams

displayName
```
string
```
headers
```
HeadersInit
```
storefrontApiVersion
```
string
```

StorefrontClientProps

contentType
Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"` Can also be customized on a call-by-call basis by passing in `'contentType'` to both `getPrivateTokenHeaders({...})` and `getPublicTokenHeaders({...})`, for example: `getPublicTokenHeaders({contentType: 'graphql'})`
```
'json' | 'graphql'
```
privateStorefrontToken
The Storefront API delegate access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) and [delegate access token](https://shopify.dev/apps/auth/oauth/delegate-access-tokens) documentation for more details.
```
string
```
publicStorefrontToken
The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.
```
string
```
storeDomain
The host name of the domain (eg: `{shop}.myshopify.com`).
```
string
```
storefrontApiVersion
The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.
```
string
```

StorefrontMutations

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

AutoAddedVariableNames

'country' | 'language'

StorefrontError

errors
```
StorefrontApiErrors
```

StorefrontApiErrors

JsonGraphQLError[] | undefined

JsonGraphQLError

extensions
Reserved for implementors to extend the protocol however they see fit, and hence there are no additional restrictions on its contents.
```
{ [key: string]: unknown; }
```
locations
If an error can be associated to a particular point in the requested GraphQL document, it should contain a list of locations.
```
{ line: number; column: number; }[]
```
message
```
string
```
name
```
string
```
path
If an error can be associated to a particular field in the GraphQL result, it _must_ contain an entry with the key `path` that details the path of the response field which experienced the error. This allows clients to identify whether a null result is intentional or caused by a runtime error.
```
(string | number)[]
```
stack
```
string
```

StorefrontQueries

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

StorefrontQueryOptions

StorefrontCommonExtraParams & {
  query: string;
  mutation?: never;
  cache?: CachingStrategy;
}

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.

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
```
mode
The caching mode, generally `public`, `private`, or `no-store`.
```
string
```
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
```
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
```

Headers

I18nBase

country
The code designating a country/region, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, then it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.
```
CountryCode
```

language

StorefrontLanguageCode | CustomerLanguageCode

Examples

import {storefrontRedirect, createStorefrontClient} from '@shopify/hydrogen';

import * as reactRouterBuild from 'virtual:react-router/server-build';

import {

createRequestHandler,

getStorefrontHeaders,

} from '@shopify/hydrogen/oxygen';

export default {

async fetch(request, env, executionContext) {

const {storefront} = createStorefrontClient({

cache: await caches.open('hydrogen'),

waitUntil: (p) => executionContext.waitUntil(p),

privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,

publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,

storeDomain: env.PUBLIC_STORE_DOMAIN,

storefrontHeaders: getStorefrontHeaders(request),

});

const handleRequest = createRequestHandler({

build: reactRouterBuild,

mode: process.env.NODE_ENV,

});

const response = await handleRequest(request);

if (response.status === 404) {

/**

* Check for redirects only when there's a 404 from

* the app. If the redirect doesn't exist, then

* `storefrontRedirect` will pass through the 404

* response.

return storefrontRedirect({request, response, storefront});

}

return response;

};

Examples

Example code

JavaScript

import {storefrontRedirect, createStorefrontClient} from '@shopify/hydrogen';
import * as reactRouterBuild from 'virtual:react-router/server-build';
import {
  createRequestHandler,
  getStorefrontHeaders,
} from '@shopify/hydrogen/oxygen';

export default {
  async fetch(request, env, executionContext) {
    const {storefront} = createStorefrontClient({
      cache: await caches.open('hydrogen'),
      waitUntil: (p) => executionContext.waitUntil(p),
      privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      storeDomain: env.PUBLIC_STORE_DOMAIN,
      storefrontHeaders: getStorefrontHeaders(request),
    });

    const handleRequest = createRequestHandler({
      build: reactRouterBuild,
      mode: process.env.NODE_ENV,
    });

    const response = await handleRequest(request);

    if (response.status === 404) {
      /**
       * Check for redirects only when there's a 404 from
       * the app. If the redirect doesn't exist, then
       * `storefrontRedirect` will pass through the 404
       * response.
       */
      return storefrontRedirect({request, response, storefront});
    }

    return response;
  },
};

TypeScript

import {storefrontRedirect, createStorefrontClient} from '@shopify/hydrogen';
import * as reactRouterBuild from 'virtual:react-router/server-build';
import {
  createRequestHandler,
  getStorefrontHeaders,
} from '@shopify/hydrogen/oxygen';

export default {
  async fetch(request: Request, env: Env, executionContext: ExecutionContext) {
    const {storefront} = createStorefrontClient({
      cache: await caches.open('hydrogen'),
      waitUntil: (p: Promise<unknown>) => executionContext.waitUntil(p),
      privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      storeDomain: env.PUBLIC_STORE_DOMAIN,
      storefrontHeaders: getStorefrontHeaders(request),
    });

    const handleRequest = createRequestHandler({
      build: reactRouterBuild,
      mode: process.env.NODE_ENV,
    });

    const response = await handleRequest(request);

    if (response.status === 404) {
      /**
       * Check for redirects only when there's a 404 from
       * the app. If the redirect doesn't exist, then
       * `storefrontRedirect` will pass through the 404
       * response.
       */
      return storefrontRedirect({request, response, storefront});
    }

    return response;
  },
};

Was this page helpful?

Anchor to storefrontRedirectstorefrontRedirect(optionsoptions)

Anchor to storefrontRedirect-parametersParameters

Anchor to storefrontRedirect-returnsReturns

StorefrontRedirect

Storefront

AllCacheOptions

NoStoreStrategy

StorefrontCommonExtraParams

StorefrontClientProps

StorefrontMutations

AutoAddedVariableNames

StorefrontError

StorefrontApiErrors

JsonGraphQLError

StorefrontQueries

StorefrontQueryOptions

CachingStrategy

Headers

I18nBase

Examples

Example code

JavaScript

TypeScript

Anchor to storefrontRedirect
storefrontRedirect(
options
)