Cache Interceptor Caching All APIs and Not Returning Fresh Data

[ParthSST]

const AxiosInstance = axios.create({ /* headers */ });
const AxiosCacheInstance = axios.create({ /* same headers */ });

// Add interceptors to BOTH
AxiosInstance.interceptors.request.use(...);
AxiosInstance.interceptors.response.use(...);

AxiosCacheInstance.interceptors.request.use(...);
AxiosCacheInstance.interceptors.response.use(...);

// Now only cache AxiosCacheInstance
export const CacheAxiosInstance = setupCache(AxiosCacheInstance, {
  methods: ['get', 'post'],
  interpretHeader: false,
  storage: asyncStorageCache,
  debug: console.log,
});

export default AxiosInstance;

I am using a cache interceptor to cache specific URLs in my application. However, when I implement it like above code, it is caching all the APIs in the app, not just the ones I intend to cache. Also, it always returns the cached data, even when there is an active internet connection and new data is available from the API.

I have tried multiple approaches (even consulting AI tools), but I haven't been able to solve it. Could someone please help me with this?

Here is the exact behavior I want to achieve:

1. On the first API call, check if cached data exists and return it immediately to update the UI.
2. In the background, fetch updated data from the server and refresh the UI with this new data.
3. Replace the old cached response with the newly fetched response.

One more question — do I need to create a new instance for caching APIs?

[arthurfiorette]

setupCache() only affects the Axios instance passed to it, but caching is enabled by default for every eligible request made through that instance. You do not need a second instance just to use opt-in caching.

Disable caching globally and enable it only for selected requests:

const api = setupCache(axios.create({ /* headers */ }), {
  enabled: false
});

const response = await api.get("/cached-endpoint", {
  cache: {
    enabled: true,
    override: true,
    hydrate(cache) {
      render(cache.data); // existing cached payload
    }
  }
});

render(response.data); // fresh network payload

override: true makes a network request even while the stored response is fresh. hydrate provides the existing value before that request starts, then the Axios promise resolves with the fresh response and replaces the cache.

This is not a detached background refresh: your code receives the old value through hydrate and the fresh value from the request promise. If you only want this after expiry, omit override and configure an appropriate TTL.

Also avoid adding post to methods globally unless those POST requests are intentionally safe to cache.

Docs:

• https://axios-cache-interceptor.js.org/config/request-specifics#cache-enabled
• https://axios-cache-interceptor.js.org/config/request-specifics#cache-override
• https://axios-cache-interceptor.js.org/config/request-specifics#cache-hydrate