译零 TransZero · TanStack Query v3 中文文档
主站

缓存示例 caching

在阅读本篇文档之前,请认真阅读重要的默认配置

基础

此缓存示例说明了以下内容和其生命周期:

  • 查询有和没有缓存数据的实例
  • 后台重新拉取
  • 不活跃的查询
  • 垃圾回收

假设我们使用的默认cacheTime为5 分钟,默认的staleTime为0。

  • useQuery('todos', fetchTodos)的一个新实例被挂载
    • 由于没有使用该查询 + 变量组合的方式进行其他查询,该查询将显示硬加载状态,并发出网络请求以获取数据
    • 然后它将使用todos和fetchTodos作为缓存的唯一标识符缓存数据
    • 在配置的staleTime(默认为0或立即)之后,该 Hook 会将自己标记为过时
  • useQuery('todos', fetchTodos)的第二个实例挂载在其他位置
    • 由于该查询的第一个实例的数据已存在于缓存中,因此该数据将立即从缓存返回
  • 由于某些原因触发了其中一个,两个查询都会在后台重新拉取(但只有一个请求)
    • 如果数据获取成功,两个实例都将使用新的数据来进行更新
  • useQuery('todos', fetchTodos)查询的两个实例都已卸载,并且不再使用
    • 由于此查询没有更多活动实例,因此可以使用cacheTime设置缓存超时,以删除查询并对其进行垃圾回收(默认为5 分钟)
  • 在缓存超时完成之前,挂载另一个useQuery('todos', fetchTodos)实例
    • 当fetchTodos函数在后台运行时,该查询立即返回可用的缓存值,以用一个新值填充
  • useQuery('todos', fetchTodos)的最后一个实例卸载
  • 5 分钟内没有再出现useQuery('todos', fetchTodos)的实例
    • 该查询及其(缓存)数据将被删除并进行垃圾回收。

本页为 TanStack Query 文档(React 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

本页译文取自社区中文版 react-query-web-i18n(MIT),非本站翻译,已停止更新,内容可能与当前 API 有出入。

译自上游 (未记录版本)