Cache
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-parametersParameters
- Anchor to overrideOptionsoverride
Optionsoverride Options AllCacheOptionsAllCacheOptionsrequiredrequired
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
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; }
