获取 API 无法加载 webpack://... 错误。

Question

我正在尝试学习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 playground中它可以正常工作，所以我知道数据是存在的。此外，如果我刷新页面，它会正确加载。只有在页面首次加载时才会出错。

有人能指点我如何更好地构造这个查询吗？我知道我很接近成功，但我缺少一些细节。谢谢！

- Jordan Rhea

Answer 1

我曾经遇到过类似的情况，遇到了同样的错误，并且发现，这个错误实际上与GraphQL或Apollo没有直接关联。这是一个react-error-overlay的错误，基本上意味着"发生了错误，无法显示您的错误"或者"无法显示您的错误"。

关于您的情况：可能是因为在Review组件中，您试图访问未定义属性上的某些内容，例如review.text.length，而有些评论可能没有这个属性？

- Viesturs Knopkens

---

这完全正确。我应该回来给出答案，但在解决错误后的宽慰浪潮中，我忘记了。我不得不重新检查我如何设置评论。 - Jordan Rhea