React Query 和 Apollo Client 都会缓存 API 响应，第二次不会发送新请求，但会从缓存中返回数据。并且，如果后端数据发生变化，缓存中的数据也会更新。
但是 React Query 或 Apollo 客户端如何知道何时发送新的 API 请求或何时从缓存中发送数据？是否有任何后台网络请求正在进行？
如果是这样，为什么当数据从缓存返回时，我们在网络选项卡中看不到任何 API 请求？
如果 React Query 在后台发送 API 请求来检查数据是否更新，这不是浪费资源吗，因为我们在后台发送了不必要的 API 调用，可能数据永远不会改变，但我们不断发送 API请求？
我试图寻找这个，但我找不到满意的答案。到处都说数据是缓存的数据并更新了缓存，但是这是怎么发生的呢？谁能解释一下流程？
【问题讨论】：
标签： reactjs caching apollo apollo-client react-query
尝试从反应查询的角度回答：
- 但是 React Query 或 Apollo 客户端如何知道何时发送新的 API 请求或何时从缓存中发送数据？是否有任何后台网络请求正在进行？
React Query 包含 stale-while-revalidate 缓存机制，这意味着当缓存中有数据时，您会立即获取它（即使它可能不再是最新的），然后可能会有后台更新strategic points in time。这些时间点包括您重新聚焦浏览器窗口或安装使用查询的新组件时。 RQ 不会在每次重新渲染时重新获取。
- 如果是这样，为什么当从缓存返回数据时，我们在网络选项卡中看不到任何 API 请求？
只有 stale 查询被重新获取 - 这可以通过设置 staleTime 来自定义。默认值为0（零） - 因此默认情况下每个查询都被认为是陈旧的，因此 react-query 可以在这些战略点及时更新它。
因此，如果查询不是陈旧的，或者您没有达到这些战略点之一，您将只从缓存中获取数据后台重新获取。
- 如果 React Query 在后台发送 API 请求来检查数据是否更新，这不是浪费资源吗，因为我们在后台发送了不必要的 API 调用，可能数据永远不会改变，但我们不断发送 API请求？
可能是的，但这取决于您的资源。默认情况下，React Query 会尝试优化数据准确性，而不是最小化网络请求的数量。这可以通过设置staleTime 来定制。如果您只想获取一次然后不再更新，请尝试设置更高的 staleTime。
我试图在我的文章 React Query as a State Manager 中介绍这一点：
答案完全取决于我们的问题域。如果我们获取所有喜欢和 cmets 的 Twitter 帖子，它可能很快就会过时（陈旧）。如果我们获取每天更新的汇率，那么即使不重新获取，我们的数据也会在一段时间内相当准确。
另一种优化后端被请求命中频率的方法是使用 http 缓存。您可以在 simple example from the docs 中看到这一点，我们在其中查询 github api。它以以下缓存控制标头回答：
缓存控制：公共，max-age=60，s-maxage=60
这意味着即使 react-query 尝试重新获取浏览器选项卡的每个焦点，网络请求在接下来的 60 秒内不会访问 github api。您仍然可以在浏览器 devtools 的网络选项卡中看到请求，但响应将来自“磁盘缓存”。
【讨论】：
Infinity。 react-query 不对您的问题域做任何假设，因此不知道这一点