reactjs - 为什么 react useQuery() 在突变后不获取最新数据？

Question

我有这样的代码

const [inputComment, setInputComment] = useState('');

const [
  commentPost,
  { data: data4, loading: loading4, errorCreate4 },
] = useMutation(COMMENT_POST);

const { error: error2, loading: loading2, data: data2 } = useQuery(
  GET_POST_BY_ID,
  {
    variables: {
      postid: item.id,
    },
  },
);

const doComment = () => {
  commentPost({
    variables: {
      postId: item.id,
      userEmail: email,
      comment: inputComment,
    },
  })
    .then(({ data }) => {
      setInputComment('');
      console.log('success');
    })
    .catch((e) => {
      console.log('not success');
    });
};

这应该获取数据，当我发表评论时，它会运行突变并重新呈现所有内容。

我的问题是，它可以重新呈现，但是 useQuery 获取的数据不是最新数据，也就是我添加新评论之前的数据。

有谁知道如何解决这个问题？

请帮忙:(

Answer 1

您的变更会修改服务器端上的数据。
变更完成后，您应该重新获取您的数据，以便在客户端的本地缓存中获取修改后的版本。

通过猜测你的变异和查询实际是如何工作的，下面是它的样子:

const [
  commentPost,
  { data: data4, loading: loading4, errorCreate4 },
] = useMutation(COMMENT_POST, {
  refetchQueries: [
    { query: GET_POST_BY_ID, variables: { postid: item.id } }
  ]
});

否则，您可以直接更新本地缓存，而不是从服务器重新获取。
可以找到更多信息 here in the official documentation .