React-query中invalidateQueries失效问题求助

问题出在你在onSuccess回调里新建了一个QueryClient实例，这个新实例和你调用useQuery时使用的不是同一个，所以执行invalidateQueries根本触不到原来的查询缓存，自然不会刷新评论列表。

正确做法是用useQueryClient hook获取当前组件上下文里的QueryClient实例，而不是重新创建：

// 先导入useQueryClient
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// 获取当前上下文的QueryClient
const queryClient = useQueryClient();

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

const createCommentMutation = useMutation(postComment, {
  onSuccess: async () => {
    // 直接用已获取的queryClient执行失效操作
    await queryClient.invalidateQueries("getComments");
  },
});

这样修改后，创建评论成功后就能正确触发getComments查询的失效与重新获取，更新评论列表了。

内容的提问来源于stack exchange，提问作者bumhyun