通过修改的数据更新查询内容 Updates From Mutation Responses

Vue 查看英文原文 ↗

当在处理更新了服务器上的对象的修改时，新的对象通常会在更新的响应中自动返回。我们可以利用修改函数返回的对象，并使用 Query Client 的 setQueryData 方法立即用新数据更新现有的查询，而不是去触发新的数据获取，浪费对已有数据的网络调用：

TypeScript

1const queryClient = useQueryClient();2 3const mutation = useMutation(editTodo, {4  onSuccess: (data) => {5    queryClient.setQueryData(["todo", { id: 5 }], data);6  },7});8 9mutation.mutate({10  id: 5,11  name: "Do the laundry",12});13 14// 下面的查询将被更新为成功的修改响应15const { status, data, error } = useQuery(["todo", { id: 5 }], fetchTodoById);

你可能想将 onSuccess 的逻辑绑定到一个可重用的修改中。为此，你可以创建一个自定义 hook，如下所示：

TypeScript

1const useMutateTodo = () => {2  const queryClient = useQueryClient();3 4  return useMutation(editTodo, {5    // 注意第二个参数是`mutate`函数需要的变量6    onSuccess: (data, variables) => {7      queryClient.setQueryData(["todo", { id: variables.id }], data);8    },9  });10};