Request ID

Every request has an id that tells it apart from other requests. The ID is the key used to store its cache entry.

The ID binds a cache entry to its request, so you can reference or invalidate it later, and it lets requests to the same endpoint with the same parameters share one cache entry.

The default ID generator ignores leading and trailing slashes, so { baseURL: 'https://a.com/', url: '/b' } and { url: 'https://a.com/b/' } get the same ID.

Different requests

import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

const axios = setupCache(Axios);
// These requests go to different endpoints, but they share
// the same cache entry because both use the same ID.
const reqA = await axios.get('/a', { id: 'custom-id' });
const reqB = await axios.get('/b', { id: 'custom-id' });

Different contexts

import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

const axios = setupCache(Axios);
// The same approach creates two separate cache entries for one endpoint,
// so each use case gets its own cache.
const userForPageX = await axios.get('/users', { id: 'users-page-x' });
const userForPageY = await axios.get('/users', { id: 'users-page-y' });

WARNING

If you give two different requests the same ID, the library ignores any differences between them and both share the same cache entry.

Custom generator

By default, the ID generator takes the request’s method, baseURL, url, params and data (plus, when Vary requires it, the values of the request headers it lists), and hashes them with object-code into a 32-bit number.

This is unique enough for most applications, but there is a theoretical 50% chance of a collision after about 77,000 keys.

With buildWebStorage, this limit rarely matters, because the ~5 MB quota of localStorage and sessionStorage fills up long before that many entries.

WARNING

If you may exceed 77,000 unique keys, write a custom key generator that uses a hash with a lower collision probability, such as object-hash.

Create a generator with buildKeyGenerator. The resulting generator still returns config.id when it is set. If your function returns a string or number, it is used as the key directly; any other value is hashed with object-code.

The second argument, meta, holds the request header values selected by Vary. Include it in the key, otherwise requests that differ in those headers share the same cache entry.

This example only uses the url, method, a custom property and the Vary values:

import Axios from 'axios';
import { setupCache, buildKeyGenerator } from 'axios-cache-interceptor';

const axios = setupCache(Axios, {
  generateKey: buildKeyGenerator((request, meta /* [!code focus:6] */) => ({
    method: request.method,
    url: request.url,
    custom: logicWith(request.method, request.url),
    vary: meta?.vary
  }))
});