How should one clear a persisted Query Client?

[gillkyle]

Hello, I'm really excited about some of the improvements the persistQueryClient has made in my app. I'm working with a beta release ([email protected]) with what will become the stable version of PersistQueryClientProvider in a React web app.

We've found that in some cases our persisted cache causes confusion for users/developers when data is unexpectedly cached. I'd like to add a "Clear Cache" function that I can expose to flush the cache. I've read the Beta docs (that I believe are most relevant) and poked around the code looking for things that might be less documented and haven't found a solution to get there.

For context: I've created a webStoragePersister with localStorage as demonstrated in the beta docs (and have linked a minimal example).

Things I've tried

1. Passing in a new buster to the PersistQueryClientProvider, it seems only the default value passed into buster is used (and this is perhaps more intended for version identifiers or something?...)
2. Trying to bypass any API and remove the cache from localStorage myself with localStorage.removeItem('REACT_QUERY_OFFLINE_CACHE'), this seems like it should work in theory but after removal, it seems a new cache gets rewritten with a newer timestamp immediately after
3. Overwrite the value in localStorage (similar to the solution above), which suffers from the same problem above
4. Clearing the cache by calling removeClient on the original persister created. I pass the persister down via context and calling removeClient seems to do the same thing as writing to localStorage myself. Upon reviewing the code, it seems this is likely the case.
5. Surprisingly, one of the things I've found that works is waiting a few seconds to clear localStorage, I'm guessing as it's letting a lot of other processes finish that have restored the cache after I've attempted to blow it away.

Minimal Reproduction

All of the above attempts are included in this sandbox:

https://stackblitz.com/edit/nextjs-vgdtql?file=components/Example.js

You can watch the 5 numbers load in delayed if the cache is removed from localStorage, here's a small recording of myself starting with a cache, clearing it with my signature wait a few seconds and clear things strategy:

View recording

CleanShot.2022-07-06.at.18.00.42.mp4

Other ideas that seem possible?

• is it enough to just clear the queryClient?

[gillkyle]

Okay I found the answer and I feel silly that it took writing out all of this and going through so many attempts to get it right, but have learned a lot about the inner workings in the process!

Turns out since the cache comes from the queryClient that is in memory, my last idea listed in my original post is actually correct, I can simply wipe the client and let it write the new empty store to the persisted cache like so:

queryClient.clear()

[lili21]

I thought a different buster string would do that, why that doesn't work?

[TkDodo]

The buster is used when you restore initially from the external storage. This only happens when the PersistQueryClientProvider mounts. It doesn’t work to clear the entry “on-the-fly”. And even if you were to clear it, since there’s a sync between what’s in memory and what’s on the disk, it would just re-appear 1second later.

Clearing the memory cache does what you want here because it will then sync an “empty” cache to the disk.