apollo-client icon indicating copy to clipboard operation
apollo-client copied to clipboard

Cannot clear the cache

Open keeganstothert opened this issue 2 years ago • 7 comments

Issue Description

At first I assumed this issue was related to apollo3-cache-persist so I ripped that out. The issue persists.

There is absolutely no way to clear, reset, or evict the cache using this library. I have tried the following

client.resetStore()

client.clearStore()

client.cache.evict()
client.cache.gc()

client.cache.evict({ fieldName: "userMany" })
client.cache.gc()

client.writeQuery({
  query: USER_MANY,
  data: {
    payload: [],
    pageInfo: {},
  },
});

Not a single one of these functions has any effect. The query continues to return the cached data. It is impossible to implement logout, role changes, or clearing stale data of any kind.

The only method I have found to work is to eviscerate the entire ApolloClient instance, supply a key prop to the ApolloProvider and increment it when a new client is created. This solution only works for logout as it has lot's of unintended consequences when using inside the app (like in flight queries dissapearing).

I have read through every single issue on this topic, tried every solution provided, and nothing has worked.

Link to Reproduction

https://www.apollographql.com/docs/react/caching/advanced-topics/

Reproduction Steps

perform any query and try removing the cache with any method imaginable. it's physically impossible.

this was tested in the context of a react application using useApolloClient to retrieve the client

@apollo/client version

3.9.1

keeganstothert avatar Jan 31 '24 21:01 keeganstothert

Hey @keeganstothert 👋

Are you referring specifically to the return value of the hooks or the cache itself? This statement makes me think you're referring to the cache itself, but I'm not so sure:

here is absolutely no way to clear, reset, or evict the cache using this library.

I've tried reproducing this behavior and I'm seeing the cache clear just fine. Here is an example that calls clearStore on a button click. If you look at the console logs, you'll see there is cache data before the clearStore call, but its empty after calling that function: https://codesandbox.io/p/devbox/priceless-firefly-2vjsnk

If you're not seeing this behavior, a reproduction would be super helpful. The docs link as the reproduction URL doesn't help us much 😆

jerelmiller avatar Jan 31 '24 22:01 jerelmiller

I believe there are 2 things happening in my case that could be the issue.

My extensive use of the previousData field and my expectation that the cache actually gets deleted rather than simply forcing old queries to fire again.

when I call client.resetStore() this seems to do nothing but re fire queries. it doesn't actually reset (empty) the cache. and client.clearStore() simply has no effect, and the same goes for the other methods like evicting.

in a react app my goal is to navigate to a page which uses something like

const { data, previousData, loading } - useQuery(USER_MANY)

const users = (data ?? previousData)?.userMany?.payload;

and have it load as if it were the very first time. However it ALWAYS presents cached data if that query has run previously.

i'll whip up a codesandbox shortly.

keeganstothert avatar Jan 31 '24 22:01 keeganstothert

Thanks! A reproduction would be super helpful.

jerelmiller avatar Jan 31 '24 23:01 jerelmiller

We've also been seeing this for awhile. Ended up just reloading the window after sign out because there doesn't seem to be a way to actually reset the Apollo cache/store.

kainosnoema avatar Feb 02 '24 02:02 kainosnoema

Hi @jerelmiller!

I noticed a difference in behaviour between apolloclient 3.4.0 and 3.9.6 (I've created a codesandbox for both versions to demonstrate the difference in behaviour). In version 3.4.0, when you use a local query for writing to the cache, all the useQueries reading this local query get notified about the update and re-renders , check: https://codesandbox.io/p/devbox/apollo3-4-0-react17-3dt9l6?file=%2Fsrc%2FApp.jsx%3A47%2C26

This isn't happening in the new version of apollo/client, the cache gets updated but the read queries don't get notified about the update: https://codesandbox.io/p/devbox/mnjtr3?file=%2Fsrc%2FApp.jsx%3A14%2C10

ismailassa avatar Mar 07 '24 13:03 ismailassa

@ismailassa thank you! This is useful. Appreciate it!

jerelmiller avatar Mar 07 '24 15:03 jerelmiller

@ismailassa thank you! This is useful. Appreciate it!

Never mind, resetStore() resets the cache in the new version

ismailassa avatar Mar 07 '24 20:03 ismailassa

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

github-actions[bot] avatar May 24 '24 05:05 github-actions[bot]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.

github-actions[bot] avatar Jun 28 '24 00:06 github-actions[bot]