Allow to dynamically set the cache strategy in withCache

[chrisvltn]

Current state

When calling withCache, we can define a Cache strategystrategy which specifies for how long that promise will be cached.

Problem

Some third parties might specify the data expiration time in the response itself, making us unaware of the ideal strategy before doing the actual HTTP request to the 3rd party.

Solution

We could add a function updateStrategy along with the existing addDebugData to the withCache action.

This function would allow to dynamically overwrite the strategy during the action execution.

From what I see in the current withCache code, the strategy is only used for saving the action result into the cache, meaning it would be possible to have it dynamically generated: https://github.com/Shopify/hydrogen/blob/3ec315587861da27aded80eef45ad394e0cd1b40/packages/hydrogen/src/cache/run-with-cache.ts

The usage could look something like (adapting the current example in the docs):

const VIDEO_API_ENDPOINT = 'https://example-cms.com/api/video/123';

export async function loader({request, context}) {
  const { storefront, withCache } = context;

  /**
   *  The cache key is used to uniquely identify the stored value in cache.
   *  If caching data for logged-in users, then make sure to add something
   *  unique to the user in the cache key, such as their email address.
   */
  const cacheKey = [VIDEO_API_ENDPOINT];

  // The second parameter accepts custom cache options
  const videoUrl = await withCache(VIDEO_API_ENDPOINT, storefront.CacheLong(), async ({ updateStrategy }) => {
    const response = await fetch(VIDEO_API_ENDPOINT);
    // Thrown errors behave like any other error in a Remix loader
    if (!response.ok) throw new Error('Something went wrong. Skipping cache.');

    const {video, expireAt} = await response.json()
    const expireIn = expireAt - (Date.now() / 1000) // Expire time in seconds

    if (expireIn) {
      // Overwrites default `storefront.CacheLong()` defined above
      updateStrategy(storefront.CacheCustom({
        maxAge: expireIn - 10, // 10 seconds for revalidation
        staleWhileRevalidate: 10,
      }))
    }

    // The returned value must be serializable
    return video.url
  });

  return {videoUrl};
}

In this example, the API returns a video URL that will expire at expireAt (included in the response). This means the server should generate a new URL when this expireAt time comes.

Allowing to dynamically update the cache strategy allows this to be easily done.

[wizardlyhel]

Cache expiration defined by response result is definitely something we didn't think about when designing withCache.

@frandiox Thoughts on how we can incorporate this ability into the upcoming withCache update?

[frandiox]

For the record, we did in fact consider dynamic cache in the original proposal ( withCache('key', () => {/*... fetch data*/; return { data, strategy: data.errors ? NoCache() : CacheShort() }}) and other alternatives).

However, the final decision was that withCache should only accept a static cache strategy. I guess we can revisit the decision and choose a new API (either a param function, or return {data,strategy}, etc.)?