来自变更的失效 | TanStack Query Vue Docs

来自变更的失效

使查询失效只是战斗的一半。知道何时使它们失效是另一半。通常，当您的应用程序中的变更成功时，很可能您的应用程序中有相关的查询需要失效，并且可能需要重新获取以说明变更带来的新更改。

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

tsx

const mutation = useMutation({ mutationFn: postTodo })

const mutation = useMutation({ mutationFn: postTodo })

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

tsx

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

const queryClient = useQueryClient()

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

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

const queryClient = useQueryClient()

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

您可以使用 useMutation 钩子中可用的任何回调来连接您的失效。