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 是一个稍微高级的同步方法,用于从缓存中获取现有的查询实例。此实例不仅包含查询的所有状态,还包含所有实例以及查询的底层细节。如果查询不存在,则返回 undefined。
注意:这对于大多数应用程序来说通常不是必需的,但在需要查询的更多信息(例如,查看 query.state.dataUpdatedAt 时间戳以确定查询是否足够新鲜可用作初始值)的罕见情况下可能很有用。
const query = queryCache.find(queryKey)
const query = queryCache.find(queryKey)
选项
返回
findAll 是一个更高级的同步方法,用于从缓存中获取与查询键部分匹配的现有查询实例。如果查询不存在,则返回空数组。
注意:这对于大多数应用程序来说通常不是必需的,但在需要查询的更多信息的罕见情况下可能很有用。
const queries = queryCache.findAll(queryKey)
const queries = queryCache.findAll(queryKey)
选项
返回
可以使用 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)
选项
返回
可以使用 clear 方法来完全清空缓存并重新开始。
queryCache.clear()
queryCache.clear()
要更深入地了解 QueryCache 的内部工作原理,请查看社区资源中的 #18: Inside React Query。