useQuery 未返回最新数据

Question

\n
• 我有一个主页 ( /home)，其中包含卡片形式的产品列表（通过\n检索useQuery），每个卡片都有一个赞成按钮
\n
• 当我单击“投票”时，\n 触发投票突变 + UI 更改以更新投票\n计数
\n
• 当我转到另一个页面，然后返回到/home,\nuseQuery不会\xe2\x80\x99 检索到具有正确票数的产品
\n
• 但是，当我检查数据库时，所有产品都有正确的投票\n计数。
\n

\n

为什么useQuery在我刷新另一页之前\n不返回正确的金额？

\n

作为参考，如下：

\n

const Home = props => {\n  const {data, loading, error} = useQuery(GET_PRODUCTS_LOGGED_IN, {\n    variables: {\n      userid: props.userid\n    }\n  });\n  \n  console.log(\n    'data', data.products // this data is outdated after I go from /home -> /profile -> /home\n  );\n\n  return (\n    <Container>\n      {_.map(data.products, product => (\n        <VoteButton\n          hasVoted={product.hasVoted}\n          likes={product.likes}\n          productid={product.productid}\n        />\n      ))}\n    </Container>\n  );\n}\n

\n

const VoteButton = ({likes, hasVoted, productid}) => {\n  const [localHasVoted, updateLocalHasVoted] = useState(hasVoted);\n  const [likesCount, updateLikesCount] = useState(likes);\n  const [onVote] = useMutation(VOTE_PRODUCT);\n\n  const onClickUpvote = (event) => {\n    onVote({\n      variables: {\n        productid\n      }\n    })\n    updateLocalHasVoted(!localHasVoted);\n    updateLikesCount(localHasVoted ? likesCount - 1 : likesCount + 1);\n  }\n  \n  return (\n    <VoteContainer onClick={onClickUpvote}>\n        <VoteCount >{likesCount}</VoteCount>\n    </VoteContainer>\n  );\n};\n

\n

Answer 1

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

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

您还可以这样做，以便当您的突变发生时，它将通过在 useMutation 上设置“refetch-queries”选项来再次运行您的查询，如下面的代码所示。这将导致您的查询在突变发生后立即触发。您可以在这里阅读更多相关信息Apollo 突变选项

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