Choose a version:

getSitemap

Generate a sitemap for a specific resource type. Returns a standard Response object.

Anchor to getSitemap
getSitemap(
options
)

Generate a sitemap for a specific resource type.

Anchor to getSitemap-parametersParameters

Anchor to options options required

Anchor to getSitemap-returnsReturns

Promise<Response>

GetSiteMapOptions

getChangeFreq
Optionally customize the changefreq property for each URL
```
(options: { type: string; handle: string; }) => string
```
getLink
A function that produces a canonical url for a resource. It is called multiple times for each locale supported by the app.
```
(options: { type: string; baseUrl: string; handle?: string; locale?: string; }) => string
```
locales
An array of locales to generate alternate tags
```
string[]
```
noItemsFallback
If the sitemap has no links, fallback to rendering a link to the homepage. This prevents errors in Google's search console. Defaults to `/`.
```
string
```
params
The params object from Remix
```
Params<string>
```
request
A Remix Request object
```
Request
```
storefront
The Storefront API Client from Hydrogen
```
Storefront
```

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

Examples

import {getSitemap} from '@shopify/hydrogen';

export async function loader({request, params, context: {storefront}}) {

const response = await getSitemap({

storefront,

request,

params,

// The locales to include in the sitemap

locales: ['EN-US', 'EN-CA', 'FR-CA'],

// A function to generate a link for a given resource

getLink: ({type, baseUrl, handle, locale}) => {

if (!locale) return `${baseUrl}/${type}/${handle}`;

return `${baseUrl}/${locale}/${type}/${handle}`;

});

// Set any custom headers on the sitemap response

response.headers.set('Cache-Control', `max-age=${60 * 60 * 24}`);

return response;

}

Examples

Example code

JavaScript

import {getSitemap} from '@shopify/hydrogen';

export async function loader({request, params, context: {storefront}}) {
  const response = await getSitemap({
    storefront,
    request,
    params,
    // The locales to include in the sitemap
    locales: ['EN-US', 'EN-CA', 'FR-CA'],
    // A function to generate a link for a given resource
    getLink: ({type, baseUrl, handle, locale}) => {
      if (!locale) return `${baseUrl}/${type}/${handle}`;
      return `${baseUrl}/${locale}/${type}/${handle}`;
    },
  });

  // Set any custom headers on the sitemap response
  response.headers.set('Cache-Control', `max-age=${60 * 60 * 24}`);

  return response;
}

TypeScript

import type {LoaderFunctionArgs} from 'react-router';
import {getSitemap} from '@shopify/hydrogen';

export async function loader({
  request,
  params,
  context: {storefront},
}: LoaderFunctionArgs) {
  const response = await getSitemap({
    storefront,
    request,
    params,
    // The locales to include in the sitemap
    locales: ['EN-US', 'EN-CA', 'FR-CA'],
    // A function to generate a link for a given resource
    getLink: ({type, baseUrl, handle, locale}) => {
      if (!locale) return `${baseUrl}/${type}/${handle}`;
      return `${baseUrl}/${locale}/${type}/${handle}`;
    },
  });

  // Set any custom headers on the sitemap response
  response.headers.set('Cache-Control', `max-age=${60 * 60 * 24}`);

  return response;
}