---
title: CacheCustom
description: >-
  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](/docs/custom-storefronts/hydrogen/data-fetching/fetch-data).
api_version: 2023-07
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-07/utilities/cachecustom'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-07/utilities/cachecustom.md'
---

# Cache​Custom

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](https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/fetch-data).

## cache​Custom([overrideOptions](#arguments-propertydetail-overrideoptions)​)

### Parameters

* overrideOptions

  AllCacheOptions

  required

### Returns

* AllCacheOptions

  ### AllCacheOptions

  Override options for a cache strategy.

  * mode

    string

    The caching mode, generally `public`, `private`, or `no-store`.

  * maxAge

    number

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

  * 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).

  * sMaxAge

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

  * 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).

### AllCacheOptions

Override options for a cache strategy.

* mode

  The caching mode, generally \`public\`, \`private\`, or \`no-store\`.

  ```ts
  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).

  ```ts
  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).

  ```ts
  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).

  ```ts
  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).

  ```ts
  number
  ```

```ts
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;
}
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```js
  import {json} from '@shopify/remix-oxygen';
  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 json(data);
  }
  ```

  ##### TypeScript

  ```ts
  import {json, type LoaderArgs} from '@shopify/remix-oxygen';
  import {CacheCustom} from '@shopify/hydrogen';

  export async function loader({context}: LoaderArgs) {
    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 json(data);
  }
  ```

## Related

[- createStorefrontClient](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/createstorefrontclient)

[- CacheNone](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/cachenone)

[- CacheShort](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/cacheshort)

[- CacheLong](https://shopify.dev/docs/api/hydrogen/2023-07/utilities/cachelong)