Choose a version:

CacheCustom
utility

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

maxAge number: The maximum amount of time in seconds that a resource will be considered fresh. See max-age in the MDN docs.
mode string: The caching mode, generally public, private, or no-store.
sMaxAge number: Similar to maxAge but specific to shared caches. See s-maxage in the MDN docs.
staleIfError number: 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.
staleWhileRevalidate number: Indicate that the cache should serve the stale response in the background while revalidating the cache. See stale-while-revalidate in the MDN docs.

CacheCustomGeneratedType

overrideOptions
```
AllCacheOptions
```

AllCacheOptions

AllCacheOptions

export function CacheCustom(overrideOptions: CachingStrategy): AllCacheOptions {
  return overrideOptions as AllCacheOptions;
}

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

export interface AllCacheOptions {
  /**
   * The caching mode, generally `public`, `private`, or `no-store`.
   */
  mode?: string;
  /**
   * 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).
   */
  maxAge?: number;
  /**
   * 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).
   */
  staleWhileRevalidate?: number;
  /**
   * 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).
   */
  sMaxAge?: number;
  /**
   * 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).
   */
  staleIfError?: number;
}

Was this section helpful?

Example code

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

export async function loader({context}) {

const data = await context.storefront.query(

`#grahpql

{

shop {

name

description

}

{

cache: CacheCustom({

maxAge: 1000 * 60 * 60 * 24 * 365,

staleWhileRevalidate: 1000 * 60 * 60 * 24 * 7,

}),

);

return data;

}

examples

Example code

description

I am the default example

JavaScript

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

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

  return data;
}

TypeScript

import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {CacheCustom} from '@shopify/hydrogen';

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

  return data;
}