axios-cache-interceptor: cannot get hydrate() to work

Question

I'm working on a project with

• Vue 3.3.2
• Typescript 5.0.4
• Axios 1.6.7
• axios-cache-interceptor 1.5.1

I would like to use the hydrate functionality.

If I understand correctly, when axios-cache-interceptor finds expired data in the cache, it is supposed to call the cache.hydrate callback function passing the expired data, and then once the network request has returned up-to-date data, return it.

However, my hydrate() callback function is not called.

I have tried the following. Please note that this is a POST request only because there could be a large number of filters. It does not actually create anything server-side.

  const axiosInstance = getAxiosInstance()
  const response = await axiosInstance.post(
    url,
    {
      filters: customFilters
    },
    {
      ...options,
      cache: {
        hydrate: (cache: StorageValue) => console.log('received for hydration:', cache.data)
      }
    }
  )

In a composable, I have:

const cacheOptions: CacheOptions = {
  debug: console.warn,
  headerInterpreter: undefined,
  interpretHeader: false,
  methods: ['get', 'post'],
  storage: buildWebStorage(localStorage, 'cache:'),
  ttl: 10
}
const instance = setupCache(axios.create(), cacheOptions)

function getAxiosInstance() {
  ...
  return instance
}

What I observe is that when I set the ttl to a large value, the data is cached and served from cache on the next request. When I set ttl to a small value, each new request triggers a new round-trip, but the hydrate() callback is not called.

Am I overlooking anything?

Answer 1

It turns out that the cache contents are considered not 'stale' but expired because of the Cache-Control headers in the response, specifically 'must-revalidate', 'no-cache', 'no-stale'.

By making sure that the response data is sent with the correct Cache-Control: headers, the problem was solved:

Cache-Control: max-age=15, stale-while-revalidate=1800