来自 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）

您可以使用 useMutation 钩子中可用的任何回调来触发失效

延伸阅读

有关在 Mutations 后自动使 Queries 失效的技术，请参阅社区资源中的Mutations 后自动查询失效。

延伸阅读

想跳过文档吗？

想跳过文档吗？