修改导致的失效 Invalidation From Mutations

使查询失效只是解决了一半问题。知道何时使它们失效是另一半。通常，当你的应用中的某个突变（mutation）成功时，很可能应用中存在需要失效并可能重新获取的相关查询，以反映突变带来的新变化。

例如，假设我们有一个用于发布新待办事项的突变：

const mutation = useMutation({ mutationFn: postTodo })

当 postTodo 突变成功时，我们很可能希望所有 todos 查询都被标记为失效，并可能重新获取，以显示新的待办事项。为此，你可以使用 useMutation 的 onSuccess 选项和 client 的 invalidateQueries 函数：

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// 当此突变成功时，使具有 `todos` 或 `reminders` 查询键的任何查询失效
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: async () => {
    // 如果你只使单个查询失效
    await queryClient.invalidateQueries({ queryKey: ['todos'] })

    // 如果你使多个查询失效
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ['todos'] }),
      queryClient.invalidateQueries({ queryKey: ['reminders'] }),
    ])
  },
})

在 onSuccess 中返回一个 Promise 可以确保数据在突变完全完成之前得到更新（即，在 onSuccess 完成之前，isPending 保持为 true）。

你可以使用 useMutation Hook 中可用的任何回调来触发你的失效操作。

进一步阅读

关于在突变后自动使查询失效的技术，请参阅社区资源中的 突变后自动查询失效。