在同一个组件中调用useQuery() 2次会导致其中一个失败

Question

我需要使用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, loading: loadingReviews, error: errorReviews} = useQuery(GetReviews, {
ssr: false,
variables: {
offset: 0,
limit: 3
}
});
const {data: dataRating, loading: loadingRating, error: errorRating} = useQuery(GetAverage, {
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，然后渲染失败。任何帮助都将非常感激。这应该是有效的，因为该解决方案已经在特定的线程中提出，许多人将其标记为有效的解决方案。谢谢。

Answer 1

您是否尝试过检查来处理评论和评级都为NULL的情况?

if (!dataReviews && !dataRating) {
return null;
}

或

if (!dataReviews || !dataRating) {
return null;
}

把它放在loading检查下，你应该很好去。