React Query 或 Apollo Client 如何确保更新数据?

How React Query or Apollo Client ensures updated data?

React Query 和 Apollo Client 都缓存了 API 响应,第二次没有发送新请求,但数据从缓存中返回。并且,如果后端数据发生变化,数据也会在缓存中更新。

  1. 但是 React Query 或 Apollo 客户端如何知道何时发送新的 API 请求或何时从缓存中发送数据?是否有任何后台网络请求正在进行?

  2. 如果是这样,那么当数据从缓存返回时,为什么我们在网络选项卡中看不到任何 API 请求?

  3. 如果 React Query 在后台发送 API 请求来检查数据是否更新,这不是浪费资源吗,因为我们正在发送不必要的 API 调用背景可能是数据永远不会改变,但我们不断发送 API 请求?

我试图寻找这个,但找不到满意的答案。它到处都说数据是数据被缓存并且缓存被更新但是这是怎么发生的?谁能解释一下过程?

尝试从react-queries的角度回答:

  1. But how does React Query or Apollo client knows that when to send a new API request or when to send data from cache? Are there any background network requests going on?

React Query 拥抱 stale-while-revalidate 缓存机制,这意味着当缓存中有数据时,您将立即获取它(即使它可能不再是 up-to-date),然后在那里可能是 strategic points in time 的后台更新。这些时间点包括您重新聚焦浏览器 window 或安装使用查询的新组件时。 RQ 在每个 re-render.

而不是 re-fetch
  1. If so then why don't we see any of the API request in the network tab when data is returned from the cache?

stale 查询被重新提取 - 这可以通过设置 staleTime 进行自定义。默认值为 0(零)- 因此默认情况下每个查询都被认为是陈旧的,因此 react-query 可以在那些战略时间点更新它。 因此,如果查询不是过时的,或者您没有达到这些战略点之一,您将只从缓存中获取数据 而无需 后台重新获取。

  1. If React Query is sending API requests in background to check if data has updated, isn't it the waste of resources because we are sending unnecessary API calls in the background and may be the data never changes but we are continuously sending API requests?

可能是,但这取决于您的资源。默认情况下,React Query 会尝试优化数据准确性,而不是最小化网络请求量。这可以通过设置 staleTime 来自定义。如果您只想获取一次然后不再更新,请尝试设置更高的 staleTime。

我正试图在我的文章中介绍这一点 React Query as a State Manager:

The answer depends totally on our problem domain. If we fetch a Twitter post with all its likes and comments, it is likely outdated (stale) pretty fast. If we fetch exchange rates that update on a daily basis, well, our data is going to be quite accurate for some time even without refetching.

另一种优化后端被请求命中的频率的方法是使用 http 缓存。您可以在 simple example from the docs 中看到这一点,我们在其中查询 github api。它回答以下 cache-control header:

cache-control: public, max-age=60, s-maxage=60

这意味着即使 react-query 尝试重新获取浏览器选项卡的每个焦点,网络请求也不会 命中 github api 接下来的 60 秒。您仍然可以在浏览器开发者工具的网络选项卡中看到请求,但响应将来自“磁盘缓存”。