修改导致的失效 Invalidation From Mutations

变更（Mutation）导致的查询失效

使查询失效只是一半的工作，知道何时使查询失效才是另一半。通常，在应用中执行一个 mutation 成功后，很可能有相关的查询需要失效并重新获取数据，以反映变更后的最新状态。

🌰 例如，假设我们有一个新增待办事项的 mutation：

const mutation = useMutation({ mutationFn: postTodo });

当 postTodo 这个 mutation 成功执行后，我们很可能需要使所有 todos 相关的查询失效，并重新获取数据，这样 UI 才能展示最新的待办事项列表。

在 Mutation 成功后使查询失效

你可以使用 useMutation 的 onSuccess 回调，结合 invalidateQueries 方法来实现这一点：

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

const queryClient = useQueryClient();

// 当 mutation 成功时，使 `todos` 和 `reminders` 相关的查询失效
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["todos"] });
    queryClient.invalidateQueries({ queryKey: ["reminders"] });
  },
});

Mutation 触发查询失效的方式

你可以利用 useMutation 提供的各种回调钩子来控制查询失效的时机，包括：

• onSuccess：Mutation 成功时触发查询失效（最常见）。

• onSettled：Mutation 无论成功或失败都会执行，可用于确保查询状态更新。

• onError：Mutation 失败时执行，通常用于错误处理，但也可以用于特定情况的查询失效。

你可以根据具体业务需求选择合适的方式来使查询失效。