react-query(tanStack) 中的“缓存”在哪里？他们实际上在哪里缓存数据？

Question

他们在 React Query 中提到的这个缓存在哪里，是 localStorage/IndexedDB/SessionStorage 吗？他们经常说它是内存，它也指向cookies或localStorage。这个“缓存”的位置在哪里？

如果叫内存的话，我们如何对这块内存中的缓存数据进行CRUD操作呢？（我假设RAM就是内存）

Answer 1

他们在 React Query 中提到的这个缓存在哪里，是 localStorage/IndexedDB/SessionStorage 吗？他们经常说它是内存，它也指向cookies或localStorage。这个“缓存”的位置在哪里？

缓存是存储在内存中的 JavaScript 对象。除非您添加代码来执行此操作，否则它不会保留在会话存储、本地存储或索引数据库中。如果您确实想保留它，persistQueryClient可以提供帮助。

我们如何对缓存数据进行CRUD操作

您通常不需要做任何特别的事情；当您进行查询和更改时，React 查询将为您更新缓存，然后将这些更新的值提供给您的组件。

如果需要使特定查询的缓存失效，可以在查询客户端上使用invalidateQueries方法：

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

如果由于某种原因您需要访问缓存对象本身，您可以调用queryClient.getQueryCache()来获取它，然后您将可以访问此文档页面中列出的所有方法，例如find：

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

还有一个突变缓存，您可以通过以下方式访问：queryClient.getMutationCache()