我正在尝试使用Apollo Client和GraphQL学习一些新技巧,但遇到一个错误,无法弄清楚是什么原因引起的。我正在使用的堆栈是GraphQL和ApolloClient。错误是
Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.
我检查了我的CORS设置,可以毫无问题地进行其他查询。该特定查询出现错误:
query SINGLE_STORE_QUERY($id: ID!) {
store(where: { id: $id }) {
id
name
description
image
address
lat
lng
reviews {
user {
name
}
text
rating
}
}
}
NextJS组件中的Apollo查询是:
<Query
query={SINGLE_STORE_QUERY}
variables={{ id: this.props.id }}
errorPolicy="all"
>
{({ data: { store }, error, loading }) => {
if (error) return <Error error={error} />;
if (loading) return <p>Loading...</p>;
console.log(store);
return (
<div>
<StoreHero>
<SingleTitle>{store.name}</SingleTitle>
</StoreHero>
<Container>
<p className="location">{store.address}</p>
<p className="description">{store.description}</p>
{store.reviews.map((review, ind) => (
<Review review={review} key={ind} />
))}
<ReviewForm id={this.props.id} />
</Container>
</div>
);
}}
</Query>
有趣的是,当我reviews
从查询中删除时,我没有收到错误。但是,在GraphQL操场上它可以正常工作,所以我知道数据在那里。另外,如果刷新页面,则页面会正确加载。错误只会在页面的第一次加载中出现。
谁能为我指出正确的方向,以更好地构建此查询?我知道我已经接近了,但是我缺少一些小东西。谢谢!
我也有类似的情况,但有相同的错误,并且发现,基本上该错误与GraphQL或Apollo无关。这是一个
react-error-overlay
错误,基本上表示“出现错误,显示您的错误”或“无法显示您的错误”。关于您的案例:可能是,
Review
您正试图访问未定义属性的某些内容,例如review.text.length,并且有些评论没有该属性?