useQuery 不返回最新数据答案

【问题标题】：useQuery not returning up to date datauseQuery 不返回最新数据
【发布时间】：2021-02-05 23:50:33
【问题描述】：

我有一个主页 (/home)，其中包含作为卡片的产品列表（已检索通过useQuery) 每个都有一个upvote按钮
当我点击upvote时，我触发了一个突变来投票 + 一个 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>
  );
};

【问题讨论】：

你可能在你的 apollo 客户端中使用了缓存，你需要手动更新它，这很烦人：apollographql.com/docs/react/data/mutations/…
啊，我讨厌这个
如果您不想与 ['annoying'] 缓存更新“对抗”，请使用“仅限网络”策略

标签： reactjs graphql apollo

【解决方案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 } ],
});

【讨论】：

是的，我最终使用了cache-and-network，不过感谢您的回复