缓存数据

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

基础示例

此缓存示例说明了以下生命周期过程：

• 带有和不带有缓存数据的查询实例

• 后台重新获取（Background Refetching）

• 非激活查询（Inactive Queries）

• 垃圾回收（Garbage Collection）

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

• 一个新的 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 实例被挂载。

  • 由于此前没有使用 ['todos'] 查询键发起过其他查询，该查询将显示一个完整的加载状态，并发起网络请求来获取数据。

  • 当网络请求完成后，返回的数据将被缓存在 ['todos'] 键下。

  • 该 Hook 将在配置的 staleTime（默认为 0，即立即）后将数据标记为过期（stale）。

• 另一个地方挂载了 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 的第二个实例。

  • 由于缓存中已存在第一个查询为 ['todos'] 键缓存的数据，这些数据会立即从缓存中返回。

  • 新的实例会触发一个新的网络请求，使用其查询函数 fetchTodos。

    • 请注意，无论两个 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'] 键下的缓存数据将被删除并进行垃圾回收。