缓存示例

在阅读本指南之前，请仔细阅读 重要默认值

此缓存示例说明了以下内容的故事和生命周期

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

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

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