React-query： invalidateQuery 不起作用

Question

我在创建新评论时尝试使查询无效。

const { data: comments } = useQuery("getComments", () => getComments({ originalKind: "NOTICE", originalSeq: id }));

const createCommentMutation = useMutation(postComment, {
onSuccess: async () => {
const queryClient = new QueryClient();
await queryClient.invalidateQueries("getComments");
},
});

注释已成功创建，但无效查询不起作用。 没有默认选项...

每次我创建评论时，查询都将失效

Answer 1

如果你创建一个new QueryClient，它将有一个新QueryCache，它与查询的缓存数据无关。这不是它的工作原理，也不是任何官方示例/文档所显示的。

您所要做的就是使用useQueryClient()访问客户端 - 从react-query导出的另一个钩子。这将为您提供已放入QueryClientProvider的单例查询客户端：

import { useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
const createCommentMutation = useMutation(postComment, {
onSuccess: async () => {
await queryClient.invalidateQueries("getComments");
},
});