useQuery 不返回最新数据

Question

我有一个主页 (/home)，其中包含卡片形式的产品列表（已检索通过 useQuery) 每个都有一个投票按钮
当我点击赞时，我触发一个突变来投票 + UI 更改以更新投票计数
当我转到另一个页面，然后返回到 /home， useQuery 没有检索到票数正确的产品
然而，当我检查我的数据库时，所有产品都有正确的投票计数。

为什么useQuery 不return 正确的数量，直到我做另一页刷新？

供参考，如下：

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 不返回最新数据

useQuery not returning up to date data

apollo

reactjs

graphql