缓存示例

请在阅读本指南之前，详细阅读 重要默认设置

此缓存示例说明了以下内容的历程和生命周期：

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

我们假设使用默认的 gcTime（5分钟）和默认的 staleTime（0）。

• 一个新实例的 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 挂载。
  • 由于没有其他查询使用 ['todos'] 查询键，此查询将显示硬加载状态并发出网络请求以获取数据。
  • 当网络请求完成后，返回的数据将以 ['todos'] 键缓存在缓存中。
  • 该 hook 将在配置的 staleTime（默认为 0，即立即）后将数据标记为 stale。
• 另一个 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 实例在其他地方挂载。
  • 由于缓存中已经有第一个查询的 ['todos'] 键的数据，所以该数据会立即从缓存中返回。
  • 新实例使用其查询函数触发新的网络请求。
    • 请注意，无论 fetchTodos 查询函数是否完全相同，这两个查询的 status（包括 isFetching、isPending 和其他相关值）都会更新，因为它们具有相同的查询键。
  • 当请求成功完成时，['todos'] 键下的缓存数据将更新为新数据，并且两个实例都将更新为新数据。
• useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 查询的两个实例都已卸载且不再使用。
  • 由于没有更多该查询的活动实例，因此使用 gcTime 设置了一个垃圾回收超时时间，以删除并垃圾回收该查询（默认为 5分钟）。
• 在缓存超时完成之前，useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 的另一个实例被挂载。查询会立即返回可用的缓存数据，同时在后台运行 fetchTodos 函数。当它成功完成时，它将使用新数据填充缓存。
• 最后一个 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 实例卸载。
• 在 5 分钟内没有出现更多 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 的实例。
  • ['todos'] 键下的缓存数据被删除并进行垃圾回收。