[Bug] Cache is not deleted on memoryStorage

[lnfel]

Describe the bug

I am caching a get request with an id of blog-posts on a vue 2 app. Then I am trying to delete blog-posts entry on memoryStorage by adding cache.update to my post request whenever create, update or delete requests are called to blog API.

cache: {
    interpretHeader: false,
    override: true,
    // Allows the update key to be executed
    methods: [...axios.defaults.cache.methods, 'post'],
    update: {
        'blog-posts': 'delete'
    }
},

Logging axios.storage after each request (create, update or delete) shows that blog-posts no longer exists. But when I navigate on the blog index page, request to blog-posts returns old data, weird thing is that response.cache shows false. On the chrome devtools Network tab, I see that the request is loaded from disk cache. Can confirm that axios.storage has the old data, does this mean that the blog-posts key was never deleted from memoryStorage?

I even tried doing delete window.memoryStorage.data[response.id] but to no avail.

Also nginx is returning cache-control: max-age=172800 header on the response, don't know if that's related. But I have window.axios.defaults.cache.interpretHeader = false so it should not be the case right?

To Reproduce

// initialize axios and setupCache
window.axios = require('axios');
window.axiosCacheInterceptor = require('axios-cache-interceptor/dev')
const { setupCache, buildMemoryStorage } = window.axiosCacheInterceptor
window.memoryStorage = buildMemoryStorage(true)
window.axios = setupCache(window.axios, {
    storage: window.memoryStorage,
    debug: console.log,
})
window.axios.defaults.baseURL = process.env.MIX_API_BASE_URL;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.cache.interpretHeader = false

// GET request to blog posts
axios.get(`${window.location.origin}/api/blog/posts`, {
      id: 'blog-posts',
  })
  .then((response) => {
      const posts = response.data
      console.log('id: ', response.id)
      console.log('cached: ', response.cached)
      console.log('storage: ', axios.storage)
      console.log('posts: ', posts)
  })
  .catch((error) => {
      console.warn(error)
  });

// this request should delete `blog-posts` in memoryStorage
// which it does but when GET request to blog posts is called again, old data appears
axios.post(`${window.location.origin}/api/blog/post/create`, {
      data,
  }, {
      id: 'editor-create',
      cache: {
          interpretHeader: false,
          override: true,
          // Allows the update key to be executed
          methods: [...axios.defaults.cache.methods, 'post'],
          update: {
              'blog-posts': 'delete'
          }
      },
      headers: { 'Cache-Control': 'no-cache' },
  })
  .then((response) => {
      console.log('create-post: ', response.data)
      console.log('storage: ', axios.storage)
      delete window.memoryStorage.data[response.id]
  })
  .catch((error) => {console.warn(error)});

Expected behavior

blog-posts entry in memoryStorage should have been deleted and request should not use response from disk cache

Additional context

• Vue: v2.7.8
• Axios: v1.2.1
• Axios Cache Interceptor: v0.10.7
• What storage is being used: Memory Storage
• Node Version: v14.0.0
• Browser (if applicable): Version 107.0.5304.110 (Official Build) (x86_64)

[lnfel]

For now I am adding headers: { 'Cache-Control': 'no-cache' }, to blog-posts request. Or is this the right way?

[arthurfiorette]

The disk cache that you meant is the one from network tab? Because if it is, the following is happening:

The whole axios & cache workflow is correctly evicting your cache entry, but your browser is doing another cache barrier, because we, as the javascript code, works within the js scenary, and the browser may be up to be also handling cache in their side, so js does not have any control.

The right way seems to be using the following headers in the blog-posts request:

{
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': '0',
}

This way the browser ignores cache and just axios handles them for you. See this StackOverflow post. Don't worry this will be a request header, so it won't mess up with any future request cache.

It is also not a bug, because every time that the browser should work as a middleware and be able to return disk cache or memory cache, axios should've intercepted it beforehand. And this only happens to you because the 'blog-posts': 'delete' is breaking out from the predetermined ttl that the browser understood and making us request it again.

But I'm 100% sure that this edge case, as it only happens on browsers, needs a space in the documentation, you're up to a PR?

[arthurfiorette]

Hey @infel, I actually took a time to thing about this problem and decided to fix in internally by adding cacheTakeover option. It'll be release alongside with 1.0.0.

[lnfel]

I just read your reply just now, thank you for taking some time to explain things and adding cacheTakeover option. I think I am still using the workaround I mentioned on the other project.