Question

我有一个主页（/home），其中列出了一系列卡片产品（已检索）通过useQuery），每个按钮都有一个上投票按钮
当我点击“赞”时，我触发突变以投票支持+更改了UI以更新投票计数
当我转到另一页然后返回到/home时， useQuery未检索到具有正确投票数的产品
但是，当我检查数据库时，所有产品的投票都正确计数。

为什么useQuery不能返回正确的金额，除非我执行另一页刷新？

供参考，在下面：

const Home = props => {
  const {data, loading, error} = useQuery(GET_PRODUCTS_LOGGED_IN, {
    variables: {
      userid: props.userid
    }
  });
  
  console.log(
    'data', data.products // this data is outdated after I go from /home -> /profile -> /home
  );

  return (
    <Container>
      {_.map(data.products, product => (
        <VoteButton
          hasVoted={product.hasVoted}
          likes={product.likes}
          productid={product.productid}
        />
      ))}
    </Container>
  );
}

const VoteButton = ({likes, hasVoted, productid}) => {
  const [localHasVoted, updateLocalHasVoted] = useState(hasVoted);
  const [likesCount, updateLikesCount] = useState(likes);
  const [onVote] = useMutation(VOTE_PRODUCT);

  const onClickUpvote = (event) => {
    onVote({
      variables: {
        productid
      }
    })
    updateLocalHasVoted(!localHasVoted);
    updateLikesCount(localHasVoted ? likesCount - 1 : likesCount + 1);
  }
  
  return (
    <VoteContainer onClick={onClickUpvote}>
        <VoteCount >{likesCount}</VoteCount>
    </VoteContainer>
  );
};

Answer 1

在useQuery调用上，您实际上可以向其传递一个名为“ fetch-policy”的配置选项，该选项告诉Apollo在进行调用或使用缓存之间如何执行查询。您可以在Apollo fetch policy options上找到更多信息。一种快速的解决方案是将fetch-policy设置为缓存和网络，如下例所示。

  const {data, loading, error} = useQuery(GET_PRODUCTS_LOGGED_IN, {
    variables: {
      userid: props.userid
    },
    fetchPolicy: 'cache-and-network',
  });

您还可以进行设置，以便在发生突变时通过在useMutation上设置“ refetch-queries”选项（如以下代码）来再次运行查询。这将导致您的查询在发生突变后立即触发。您可以在这里Apollo mutation options

了解更多信息

const [onVote] = useMutation(VOTE_PRODUCT, {
  refetchQueries: [ {query: GET_PRODUCTS_LOGGED_IN } ],
});

useQuery不返回最新数据

1 个答案: