Choose a version:

CacheShort
utility

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

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.

CacheShortGeneratedType

overrideOptions
```
AllCacheOptions
```

AllCacheOptions

AllCacheOptions

export function CacheShort(overrideOptions?: CachingStrategy): AllCacheOptions {
  guardExpirableModeType(overrideOptions);
  return {
    mode: PUBLIC,
    maxAge: 1,
    staleWhileRevalidate: 9,
    ...overrideOptions,
  };
}

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 {CacheShort} from '@shopify/hydrogen';

export async function loader({context}) {

const data = await context.storefront.query(

`#grahpql

{

shop {

name

description

}

{

cache: CacheShort(),

);

return data;

}

examples

Example code

description

I am the default example

JavaScript

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

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

  return data;
}

TypeScript

import {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 data;
}