本页内容
来自 Mutation 的失效
使查询失效仅仅是解决问题的一半。知道 何时 使它们失效是另一半。通常，当您的应用程序中的 mutation 成功时，您的应用程序中很可能有一些相关的查询需要失效，并可能重新获取以考虑 mutation 带来的新更改。
例如，假设我们有一个用于发布新 todo 的 mutation
tsx
const mutation = useMutation({ mutationFn: postTodo })
const mutation = useMutation({ mutationFn: postTodo })
当一个成功的 postTodo mutation 发生时，我们很可能希望所有 todos 查询都失效，并可能重新获取以显示新的 todo 项。要做到这一点，您可以使用 useMutation 的 onSuccess 选项以及 client 的 invalidateQueries 函数。
tsx
import { useMutation, useQueryClient } from '@tanstack/react-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/react-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）
tsx
import { useMutation, useQueryClient } from '@tanstack/vue-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
})
import { useMutation, useQueryClient } from '@tanstack/vue-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
})
延伸阅读
有关mutation后自动使查询失效的技巧，请参阅社区资源中的 Mutation后自动查询失效。
