How to clear the entire cache storage?

[shamxeed]

Hi! Thanks for always being there!! How can I clear the entire react-query cache data for example if the user logs out?

What I tried:

const handleLogout = async () => {
   await secureStorage.deleteItemAsync('token')
   await asyncStorage.removeItem('REACT_QUERY_OFFLINE_CACHE')
   ....
}

But that doesn't seem to work, please how can I archive that?

[TkDodo]

not sure which "cache storage" you are talking about. The react-query in-memory cache can be cleared with queryClient.clear()

other than that, if you are using any of the storage plugins - if you clear the queryCache, it should also sync that to external storages.

[shamxeed]

Yeah, I'm using a storage plugin, so is there a way to clear the entire storage at once?

[TkDodo]

like I said, if you use queryClient.clear(), it will clear the cache, and then the empty cache will be synced to the async storage, thus clearing it.

[mijash-he]

@TkDodo Is there any time latency from cache to async storage and async storage to cache?
I use queryClient.clear() on user logout, and the data in async storage is still left non-cleared.
And if I run queryClient.clear() after 1000ms, I can see it's cleared. Note that it's not cleared with 100ms timeout.

The network tab says no http request to the server.

just queryClient.clear()

Screen.Recording.2023-03-13.at.6.25.08.PM.mov

queryClient.clear() with timeout 1000ms

Screen.Recording.2023-03-13.at.6.23.19.PM.mov

[TkDodo]

yes the persisters have a throttleTime option: https://tanstack.com/query/v4/docs/react/plugins/createAsyncStoragePersister#createasyncstoragepersister

It defaults to 1000ms

[mijash-he]

I see, thank you, @TkDodo !