Where's "cache" in react-query(tanStack)? Where do they actually cache the data?

Question

Where is this cache they mention in React Query, is it localStorage/IndexedDB/SessionStorage? And often they say it's memory which also points to cookies or localStorage. Where is the location of this "cache"?

If it's called memory then how do we perform CRUD operations on cache data in this memory?(RAM is memory here I assume)

Answer 1

Where is this cache they mention in React Query, is it localStorage/IndexedDB/SessionStorage? And often they say it's memory which also points to cookies or localStorage. Where is the location of this "cache"?

The cache is a javascript object stored in memory. It will not persist in session storage, local storage, or indexDB unless you add code to do that. If you do want to persist it, persistQueryClient can help with that.

how do we perform CRUD operations on cache data

You don't usually need to do anything special; as you make queries and mutations, react query will update the cache for you, and then those updated values are given to your components.

If you need to invalidate the cache for a particular query, you can use the invalidateQueries method on the query client:

await queryClient.invalidateQueries({
  queryKey: ['posts'],
})

If for some reason you need access to the cache object itself, you can call queryClient.getQueryCache() to get it, and then you'll have access to all the methods listed in this documentation page, such as find:

const SomeComponent = () => {
  const queryClient = useQueryClient()
  const queryCache = queryClient.getQueryCache();
  const query = queryCache.find({ queryKey: ['posts'] });
  //...
}

There's also a cache for mutations, which you can access via queryClient.getMutationCache()