页面内
来自 Mutation 的失效
使查询失效只是完成了任务的一半。知道 **何时** 使它们失效是另一半。通常，当您的应用程序中的某个突变成功时，很可能您的应用程序中有相关的查询需要失效，并可能重新获取数据以反映您的突变带来的新更改。
例如，假设我们有一个用于发布新 todo 的 mutation
tsx
const mutation = useMutation(() => { mutationFn: postTodo })
const mutation = useMutation(() => { mutationFn: postTodo })
当一个成功的 postTodo 突变发生时，我们可能希望所有 todos 查询都失效，并可能重新获取数据以显示新的待办事项。要做到这一点，您可以使用 useMutation 的 onSuccess 选项以及 client 的 invalidateQueries 函数。
tsx
import { useMutation, useQueryClient } from '@tanstack/solid-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation(() => {
mutationFn: addTodo,
onSuccess: async () => {
// If you're invalidating a single query
await queryClient.invalidateQueries({ queryKey: ['todos'] })
// If you're invalidating multiple queries
await Promise.all([
queryClient.invalidateQueries({ queryKey: ['todos'] }),
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
])
},
})
import { useMutation, useQueryClient } from '@tanstack/solid-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation(() => {
mutationFn: addTodo,
onSuccess: async () => {
// If you're invalidating a single query
await queryClient.invalidateQueries({ queryKey: ['todos'] })
// If you're invalidating multiple queries
await Promise.all([
queryClient.invalidateQueries({ queryKey: ['todos'] }),
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
])
},
})
在 onSuccess 上返回一个 Promise 确保数据在 mutation 完全完成之前更新（即，直到 onSuccess 完成，isPending 才为 true）
您可以通过 useMutation hook 中提供的任何回调函数来设置您的失效操作。
延伸阅读
有关在突变后自动失效查询的技术，请参阅社区资源中的 突变后自动查询失效。
