如何解决在同一个组件中调用 useQuery() 2 次导致其中一个失败
我需要使用 apollo 在同一个组件中进行两次查询。
按照那个线程(https://github.com/trojanowski/react-apollo-hooks/issues/120)我做如下:
const {data: dataReviews,loading: loadingReviews,error: errorReviews} = useQuery(GetReviews,{
});
const {data: dataRating,loading: loadingRating,error: errorRating} = useQuery(GetAverage,{
});
但这对我不起作用。这两个请求中的大部分时间都失败了。
这是完整的代码:
const Reviews: FunctionComponent = () => {
const {data: dataReviews,{
ssr: false,variables: {
offset: 0,limit: 3
}
});
const {data: dataRating,{
ssr: false
});
if (loadingRating && loadingReviews) {
return <div className={`${styles.loader}`}/>;
}
const reviews = !loadingReviews && !errorReviews && dataReviews ? dataReviews.reviews[0].reviews : null;
const rating = !loadingRating && !errorRating && dataRating ? dataRating.average[0] : null;
return (
<div className={`${styles.netreviews_review_rate_and_stars}`}>
<div className={`${styles.reviews_list}`}>
<ReviewsSideInfo rating={rating} stats={reviews.stats} filter={reviews} recommandation={reviews}/>
<ReviewsContainer reviews={reviews}/>
</div>
</div>
);
}
export default Reviews;
最后我得到我的变量 reviews
等于 null
然后渲染失败。任何帮助将不胜感激。这应该有效,因为该解决方案已在该特定线程中提出,并且许多人将其标记为有效的解决方案。
谢谢。
解决方法
您是否尝试过检查来处理评论和评分均为 NULL 的情况。
if (!dataReviews && !dataRating) {
return null;
}
或
if (!dataReviews || !dataRating) {
return null;
}
将它放在 loading
检查下方,您应该可以开始使用了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。