译零 TransZero · TanStack Query v4 中文文档
主站

修改导致的失效 Invalidation From Mutations

(为了使查询重新检验或其他必要的程序正常工作)使查询失效只是挑战的一半。知道何时使它们无效是另一半。 通常,当应用中的一个对数据的修改成功时,很有可能在你的应用中有相关的查询需要作废,并需要重新获取数据来解释修改所产生的新变化。

例如,假设我们有一个用于发布一个新的 todo 的修改:

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

当对postTodo的修改成功时,我们可能希望对所有的todos查询都暂时失效,然后重新获取以显示新的 todo 项。 为此,可以使用useMutation的onSuccess参数和 QueryClient 的invalidateQueries函数:

TypeScript
1import { useMutation, useQueryClient } from "@tanstack/react-query";2 3const queryClient = useQueryClient();4 5// 当此修改成功时,将所有带有`todos`和`reminders`查询键值的查询都无效6const mutation = useMutation({7  mutationFn: addTodo,8  onSuccess: () => {9    queryClient.invalidateQueries({ queryKey: ["todos"] });10    queryClient.invalidateQueries({ queryKey: ["reminders"] });11  },12});

你可以使用useMutation hook中的回调来响应下一步需要干什么