如何解决useQuery不返回最新数据
- 我有一个主页(
/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>
);
};
解决方法
在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 } ],});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。