Making the cache optional (i.e. by default no cache)

Is it possible to provide a cache-adapter, but make the requests non-cachable unless you choose to?

So in effect, I want

mport axios from 'axios'
import { setupCache } from 'axios-cache-adapter'
 
const cache = setupCache({
  maxAge: 15 * 60 * 1000
})
 
const api = axios.create({
  adapter: cache.adapter
})

// but now this should not be cached
api.get('...')

// but this should be cached, by passing some option
api.get('...', { useCache: enable })

Yes, this is possible. Check how to pass custom settings to each request here: https://github.com/RasCarlito/axios-cache-adapter#per-request-options

The available options you can pass are documented here: https://github.com/RasCarlito/axios-cache-adapter#options

Your example is almost working, except you should use the ignoreCache option:

api.get('...', { ignoreCache: true })

@AndrewCraswell but that's the opposite I want; in your example, caching is enabled by default, and you can choose to ignore it per request. I want the exact opposite. Caching is disabled by default, and you can choose to enable it per request.

I'm going to be adding this to an existing project, and I don't want all GET requests to suddenly be cached without us deliberately wanting them to be cached. So I want to add the caching as an optional parameter per request that we can choose to opt it.

So when you execute setupCache shouldn't you set maxAge to 0 to effectively disable, then override it when you make requests?

@ktalebian
Did you find any solution for that? I also don't want to handle all my GET requests on localstorage, just a few specific ones.

Sorted out. The solution is to use the filter method of the library itself so that you can choose which endpoint will be cached.

please make mode with disabled cache by default( Example I want make request with cache when: api.get('...', { withCache: true })

@AndrewCraswell that would work, but that now means I need to set the maxAge in each endpoint that I want cached. Would be nice if a withCache option was available where you just enable the cache per endpoint and let the global cache setting be applied.

It's possible to have a useCache flag, just hook into each request using an interceptor.

I set it up like this:

export const client = setup({
  baseURL: API_BASE,
  withCredentials: false,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  cache: {
    maxAge: DEFAULT_MAX_AGE,
    store: forageStore,
    ignoreCache: true,
  },
})

// If `useCache` is set in request options, add a max-age age so caching is enabled
client.interceptors.request.use((config) =>   {
  if (config.useCache) {
    config.cache = { ignoreCache: false }
  }

  return config
})

I use an auxiliary function to define what I want to be in the cache or not

// Function helper
const URL_CACHED = [/users/]; // regex of the route that I WANT to stay in the cache, 'users' will be cached.

export function getURLCached(req) {
  const { url } = req;
  const urlMapped = URL_CACHED.map(pattern => {
    const patternRegexp = new RegExp(pattern);
    return patternRegexp.test(url);
  });
  const shouldCached = urlMapped.includes(true);
  return !shouldCached;
}
// End Function helper






// api.js
import { setup } from 'axios-cache-adapter';

const api = setup({
  baseURL: 'myApiURL',
  cache: {
    maxAge: 2 * 60 * 1000, // 2 minutes
    exclude: {
      filter: req => getURLCached(req), // if true does not cache, false caches
      query: false,
    },
  },
});
// end  api.js

That way I only worry about passing the routes that I want to be cached in my URL_CACHED array

I hope it helps someone!