React-Query 中的 staleTime 和 cacheTime 是什么？

Question

我已阅读 React Query 文档。不过，我不明白如何使用 staleTime 和 cacheTime 进行数据缓存。

我想在第一次 API 调用后将数据存储在缓存中 2 分钟。无论组件是否挂载或卸载，我都不想在第一次获取数据后 2 分钟内调用 API。

我使用了这个，但如果我只使用过时时间，它在 2 分钟后不会调用 API ；如果我只使用缓存时间，它每次都会调用 API（挂载组件和卸载组件）。

那么，问题出在哪里呢？最好的方法是什么？

const query = useQuery(
  ["getUserList"], 
  getUserList, 
  {
    staleTime: 120000,
    cacheTime: 120000,
  }
);

Answer 1

无论组件挂载还是卸载，我都不希望在第一次获取数据后 2 分钟内调用 API

这就是我们staleTime正在做的事情。staleTime告诉您数据的新鲜程度。它与 非常相似Cache-Control: max-age=120。

因此，如果您staleTime: 120000在示例中设置 ，则保证在第一个成功请求后的两分钟内不会收到另一个网络请求。

cacheTime是完全不同的东西。将其视为垃圾收集时间。它基本上描述了数据在被垃圾收集之前应在缓存中保留多长时间。这仅与未使用的查询相关，因为根据定义，活动查询不能被垃圾收集。

我还在我的博客中概述了这种差异：

StaleTime：查询从新鲜状态转变为过时状态的持续时间。只要查询是新鲜的，数据将始终只从缓存中读取 - 不会发生网络请求！如果查询过时（默认情况下是：立即），您仍将从缓存中获取数据，但在某些条件下可能会发生后台重新获取。

CacheTime：从缓存中删除非活动查询之前的持续时间。默认为 5 分钟。一旦没有注册观察者，即当使用该查询的所有组件都已卸载时，查询就会转换为非活动状态。

我使用了这个，但 2 分钟后它没有调用 API

这是完全不同的事情。当staleTime时间过去后，您的数据将被标记为过时 - 但这并不意味着它将立即重新获取。staleTime默认为zero这样根本不起作用。

如果您想每 2 分钟获取一次，请设置refetchInterval：

refetchInterval: 120000

Answer 2

我最近分享了一篇关于 React Query cacheTime 与 staleTime 的文章：https://medium.com/doctolib/react-query-cachetime-vs-staletime-ec74defc483e

\n

简而言之，这里有一个思维模型可以帮助您理解：查询分两步进行。

\n

步骤1：尽快响应 \xe2\x9a\xa1\xef\xb8\x8f

\n

首先，React Query 将尝试尽快提供响应。为此，它将查找缓存的值。如果它没有找到有效的（未过期的）缓存，那么它将触发对后端的调用。

\n

第 2 步：想想我们刚刚做了什么

\n

既然 React Query 已经提供了第一个值，那么就需要花时间考虑过时时间了。所以现在的问题是：这些数据仍然是新鲜的（不是陈旧的）吗？如果是，则意味着之前提供的数据不再被认为是新鲜的，因此我们必须向后端触发第二个请求。

\n

第一步是cacheTime；第二个是 staleTime。瞧\xc3\xa0。

\n

这是我为自己制作的一个小（不符合 UML）图表：

\n

\n

希望这种对现实的过度简化能让你更清楚！

\n