Choose a version:

CacheShort

The CacheShort strategy instructs caches to store data for 1 second, and staleWhileRevalidate data for an additional 9 seconds. Note: these time values are subject to change.

Learn more about data fetching in Hydrogen.

Anchor to cacheShort
cacheShort(
overrideOptions
)

Anchor to cacheShort-parametersParameters

Anchor to overrideOptions overrideOptions

Anchor to cacheShort-returnsReturns

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

AllCacheOptions

Override options for a cache strategy.

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

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

import {json} from '@shopify/remix-oxygen';

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

export async function loader({context}) {

const data = await context.storefront.query(

`#grahpql

{

shop {

name

description

}

}`,

{

cache: CacheShort(),

},

);

return json(data);

}

Examples

Example code

Description

I am the default example

JavaScript

import {json} from '@shopify/remix-oxygen';
import {CacheShort} from '@shopify/hydrogen';

export async function loader({context}) {
  const data = await context.storefront.query(
    `#grahpql
  {
    shop {
      name
      description
    }
  }`,
    {
      cache: CacheShort(),
    },
  );

  return json(data);
}

TypeScript

import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {CacheShort} from '@shopify/hydrogen';

export async function loader({context}: LoaderFunctionArgs) {
  const data = await context.storefront.query(
    `#grahpql
  {
    shop {
      name
      description
    }
  }`,
    {
      cache: CacheShort(),
    },
  );

  return json(data);
}