Cache
utility
This allows you to create your own caching strategy, using any of the options available in a object.
Learn more about data fetching in Hydrogen.
Anchor to cacheCustom-parametersParameters
Anchor to overrideOptions
overrideOptions
required
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 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.
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;
}
