查询失效
等待查询变为过期状态后才再次获取并不总是有效，特别是当你明确知道查询数据由于用户的某个操作而过时时。为此，QueryClient 提供了一个 invalidateQueries 方法，允许你智能地将查询标记为过期并可能重新获取它们！
tsx
// Invalidate every query in the cache
queryClient.invalidateQueries()
// Invalidate every query with a key that starts with `todos`
queryClient.invalidateQueries({ queryKey: ['todos'] })
// Invalidate every query in the cache
queryClient.invalidateQueries()
// Invalidate every query with a key that starts with `todos`
queryClient.invalidateQueries({ queryKey: ['todos'] })
注意：当其他使用规范化缓存的库会尝试通过命令式或模式推断来用新数据更新本地查询时，TanStack Query 为你提供了工具，以避免维护规范化缓存所需的手动工作，并规定了有针对性的失效、后台重新获取以及最终的原子更新。
当使用 invalidateQueries 使查询失效时，会发生两件事：
- 它被标记为过期。此过期状态会覆盖 useQuery 或相关 hook 中使用的任何 staleTime 配置
- 如果查询当前正在通过 useQuery 或相关 hook 渲染，它也将会在后台重新获取
使用 invalidateQueries 进行查询匹配
在使用 invalidateQueries 和 removeQueries（以及其他支持部分查询匹配的 API）等 API 时，你可以通过前缀匹配多个查询，或者通过指定精确查询来获得非常具体的匹配。有关可使用的过滤器类型的信息，请参阅查询过滤器。
在此示例中，我们可以使用 todos 前缀来使所有查询键以 todos 开头的查询失效
tsx
import { useQuery, useQueryClient } from '@tanstack/react-query'
// Get QueryClient from the context
const queryClient = useQueryClient()
queryClient.invalidateQueries({ queryKey: ['todos'] })
// Both queries below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
queryKey: ['todos', { page: 1 }],
queryFn: fetchTodoList,
})
import { useQuery, useQueryClient } from '@tanstack/react-query'
// Get QueryClient from the context
const queryClient = useQueryClient()
queryClient.invalidateQueries({ queryKey: ['todos'] })
// Both queries below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
queryKey: ['todos', { page: 1 }],
queryFn: fetchTodoList,
})
你甚至可以通过向 invalidateQueries 方法传递更具体的查询键来使带有特定变量的查询失效
tsx
queryClient.invalidateQueries({
queryKey: ['todos', { type: 'done' }],
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { type: 'done' }],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
queryClient.invalidateQueries({
queryKey: ['todos', { type: 'done' }],
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { type: 'done' }],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
invalidateQueries API 非常灵活，因此即使你只想使不包含任何变量或子键的 todos 查询失效，你也可以向 invalidateQueries 方法传递一个 exact: true 选项
tsx
queryClient.invalidateQueries({
queryKey: ['todos'],
exact: true,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { type: 'done' }],
queryFn: fetchTodoList,
})
queryClient.invalidateQueries({
queryKey: ['todos'],
exact: true,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { type: 'done' }],
queryFn: fetchTodoList,
})
如果你希望获得更精细的粒度，你可以向 invalidateQueries 方法传递一个谓词函数。此函数将接收查询缓存中的每个 Query 实例，并允许你返回 true 或 false 以决定是否要使该查询失效
tsx
queryClient.invalidateQueries({
predicate: (query) =>
query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 20 }],
queryFn: fetchTodoList,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 10 }],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 5 }],
queryFn: fetchTodoList,
})
queryClient.invalidateQueries({
predicate: (query) =>
query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 20 }],
queryFn: fetchTodoList,
})
// The query below will be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 10 }],
queryFn: fetchTodoList,
})
// However, the following query below will NOT be invalidated
const todoListQuery = useQuery({
queryKey: ['todos', { version: 5 }],
queryFn: fetchTodoList,
})
