QueryCache

QueryCache 是 TanStack Query 的存储机制。它存储其中包含的所有查询的数据、元信息和状态。

通常，您不会直接与 QueryCache 交互，而是使用 QueryClient 来处理特定的缓存。

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

const query = queryCache.find(['posts'])

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

const query = queryCache.find(['posts'])

其可用方法有：

• find
• findAll
• subscribe
• clear

选项

• onError?: (error: unknown, query: Query) => void
  • 可选
  • 如果某个查询遇到错误，则将调用此函数。
• onSuccess?: (data: unknown, query: Query) => void
  • 可选
  • 如果某个查询成功，则将调用此函数。
• onSettled?: (data: unknown | undefined, error: unknown | null, query: Query) => void
  • 可选
  • 如果某个查询已完成（成功或出错），则将调用此函数。

find 是一个稍微高级一些的同步方法，可用于从缓存中获取现有的查询实例。此实例不仅包含查询的所有状态，还包含所有实例以及查询的底层内部结构。如果查询不存在，则返回 undefined。

注意：这对于大多数应用程序来说通常不是必需的，但在极少数情况下需要有关查询的更多信息时会很有用（例��，查看 query.state.dataUpdatedAt 时间戳以确定查询是否足够新鲜以用作初始值）

const query = queryCache.find(queryKey)

const query = queryCache.find(queryKey)

选项

• filters?: QueryFilters：查询过滤器

返回值

• Query
  • 缓存中的查询实例

findAll 是一个更高级的同步方法，可用于从缓存中获取与查询键部分匹配的现有查询实例。如果查询不存在，则返回空数组。

注意：这对于大多数应用程序来说通常不是必需的，但在极少数情况下需要有关查询的更多信息时会很有用

const queries = queryCache.findAll(queryKey)

const queries = queryCache.findAll(queryKey)

选项

• queryKey?: QueryKey：查询键
• filters?: QueryFilters：查询过滤器

返回值

• Query[]
  • 缓存中的查询实例

subscribe 方法可用于订阅整个查询缓存，并获知缓存的安全/已知更新，例如查询状态更改或查询被更新、添加或删除

const callback = (event) => {
  console.log(event.type, event.query)
}

const unsubscribe = queryCache.subscribe(callback)

const callback = (event) => {
  console.log(event.type, event.query)
}

const unsubscribe = queryCache.subscribe(callback)

选项

• callback: (event: QueryCacheNotifyEvent) => void
  • 每当通过其跟踪的更新机制（例如，query.setState、queryClient.removeQueries 等）更新查询缓存时，都会使用查询缓存调用此函数。不鼓励对缓存进行超出范围的修改，并且不会触发订阅回调

返回值

• unsubscribe: Function => void
  • 此函数将从查询缓存中取消订阅回调。

clear 方法可用于完全清除缓存并重新开始。

queryCache.clear()

queryCache.clear()

要更好地了解 QueryCache 的内部工作原理，请参阅社区资源中的 #18：深入 React Query 。