axios-cache-interceptor

When using axios-cache-interceptor alongside other interceptors, the execution order depends on when the interceptors are registered relative to setupCache().

Axios follows two different patterns for interceptors:

• Request interceptors use LIFO (Last In, First Out): The last interceptor added is the first one to run.
• Response interceptors use FIFO (First In, First Out): The first interceptor added is the first one to run.

Default Behavior with setupCache():

• Requests: Interceptors registered before setupCache() run after the cache interceptor. Interceptors registered after setupCache() run before the cache interceptor.
• Responses: Interceptors registered before setupCache() run before the cache interceptor. Interceptors registered after setupCache() run after the cache interceptor.

// This will run AFTER the cache interceptor
axios.interceptors.request.use((req) => req);

// This will run BEFORE the cache interceptor
axios.interceptors.response.use((res) => res);

setupCache(axios);

// This will run BEFORE the cache interceptor
axios.interceptors.request.use((req) => req);

// This will run AFTER the cache interceptor
axios.interceptors.response.use((res) => res);

When a server sends Cache-Control headers, both the library and the browser might cache the response, creating a double layer of cache.

Setting cache.cacheTakeover: true (the default) prevents this by adding headers to the request (Cache-Control: no-cache, no-store, must-revalidate, max-age=0, Pragma: no-cache, and Expires: 0) that instruct the browser/adapter not to cache the response, ensuring only the library manages the cache.

CORS Warning: This will fail on CORS requests if the server does not include Cache-Control, Pragma, and Expires in its Access-Control-Allow-Headers configuration. If you cannot modify CORS, either set cacheTakeover: false or use a unique query parameter (cache buster) to bypass browser caching.

// Alternative: Using a cache buster for maximum reliability
axios.get(
  `/api/data?cachebuster=${Math.random().toString(36).slice(2)}`,
  { id: 'api-data-endpoint' } // Keep same cache key despite different URLs
);

When a mutation (like a POST or PUT request) is simple, you can update the existing cache entry directly using the cache.update option. This avoids an extra network request by manually applying the changes to the cached data.

To use this:

1. Assign a unique id to the request you want to update (e.g., id: 'list-posts').
2. In your mutation request, provide a cache.update object where the key is the id of the target cache entry.
3. The value should be a function: (targetCache, mutationResponse) => updatedCache | 'ignore'.

Important for Vue users: If you are modifying arrays within the cache, ensure you create a copy of the array (e.g., using the spread operator [...]) before modifying it to ensure reactivity works correctly in the UI.

// 1. Define the target request with a specific ID
function listPosts() {
  return axios.get('/posts', {
    id: 'list-posts'
  });
}

// 2. Perform mutation and update the target cache
function createPost(data) {
  return axios.post(
    '/posts',
    data,
    {
      cache: {
        update: {
          // Key is the ID of the cache entry to update
          'list-posts': (listPostsCache, createPostResponse) => {
            // Only update if the entry is actually in a 'cached' state
            if (listPostsCache.state !== 'cached') {
              return 'ignore';
            }

            // For Vue reactivity: copy the array before pushing
            listPostsCache.data.posts = [...listPostsCache.data.posts];
            listPostsCache.data.posts.push(createPostResponse.data);

            return listPostsCache;
          }
        }
      }
    }
  );
}

Use buildWebStorage to persist cache entries across page refreshes using the browser's Storage API. This is for web environments only.

Browser Quota Handling: If the browser's storage quota is reached, the adapter will attempt to evict expired entries or the oldest entries with the configured prefix to make room for new writes. If the write still fails, the value remains unstored.

// Local Storage
import axios from 'axios';
import { setupCache, buildWebStorage } from 'axios-cache-interceptor';

setupCache(axios, {
  storage: buildWebStorage(localStorage, 'axios-cache:')
});

// Session Storage
setupCache(axios, {
  storage: buildWebStorage(sessionStorage, 'axios-cache:')
});

// Custom Storage instance
const myStorage = new Storage();
setupCache(axios, {
  storage: buildWebStorage(
    myStorage,
    'axios-cache:', // prefix
    60 * 60 * 1000  // maxStaleAge
  )
});

If you need specific control over the execution order, you can disable automatic registration by passing { register: false } to setupCache(). You must then manually register the cache interceptors using the properties provided on the axios instance.

To ensure correct behavior:

1. Register the cache response interceptor first (since response interceptors are FIFO).
2. Register your custom interceptors.
3. Register the cache request interceptor last (since request interceptors are LIFO).

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

const axios = setupCache(Axios.create(), { register: false });

// Register cache response interceptor first (response interceptors are FIFO)
axios.interceptors.response.use(
  axios.responseInterceptor.onFulfilled,
  axios.responseInterceptor.onRejected
);

// Register your own interceptors
axios.interceptors.request.use((req) => req);
axios.interceptors.response.use((res) => res);

// Register cache request interceptor last (request interceptors are LIFO)
axios.interceptors.request.use(
  axios.requestInterceptor.onFulfilled,
  axios.requestInterceptor.onRejected
);