Choose a version:

CacheCustom

This allows you to create your own caching strategy, using any of the options available in a CachingStrategy object.

Learn more about data fetching in Hydrogen.

Anchor to cacheCustom
cacheCustom(
overrideOptions
)

Anchor to cacheCustom-parametersParameters

Anchor to overrideOptions overrideOptions required

Anchor to cacheCustom-returnsReturns

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
```

Examples

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

export async function loader({context}) {

const data = await context.storefront.query(

`#grahpql

{

shop {

name

description

}

{

cache: CacheCustom({

maxAge: 60 * 60 * 24 * 365,

staleWhileRevalidate: 60 * 60 * 24 * 7,

}),

);

return data;

}

Examples

Example code

JavaScript

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

export async function loader({context}) {
  const data = await context.storefront.query(
    `#grahpql
      {
        shop {
          name
          description
        }
      }
    `,
    {
      cache: CacheCustom({
        maxAge: 60 * 60 * 24 * 365,
        staleWhileRevalidate: 60 * 60 * 24 * 7,
      }),
    },
  );

  return data;
}

TypeScript

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

export async function loader({context}: LoaderFunctionArgs) {
  const data = await context.storefront.query(
    `#grahpql
      {
        shop {
          name
          description
        }
      }
    `,
    {
      cache: CacheCustom({
        maxAge: 60 * 60 * 24 * 365,
        staleWhileRevalidate: 60 * 60 * 24 * 7,
      }),
    },
  );

  return data;
}

Anchor to RelatedRelated

createStorefrontClient

CacheNone

CacheShort

CacheLong