Fetch API 无法加载 webpack://... 错误

Posted 2023-02-21

【中文标题】Fetch API 无法加载 webpack://... 错误

【英文标题】：Fetch API cannot load webpack://... error

【发布时间】：2019-06-29 22:57:34

【问题描述】：

我正在尝试使用 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
        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 操场上它运行良好，所以我知道数据在那里。另外，如果我刷新页面，它会正确加载。只有在第一次加载页面时才会出错。

任何人都可以为我指出如何更好地构建此查询的正确方向吗？我知道我很接近，但我错过了一些小事。谢谢！

【参考方案1】：

我遇到了同样的错误，发现基本上这个错误与 GraphQL 或 Apollo 无关。这是一个react-error-overlay 错误，基本上意味着“出现错误，显示您的错误”或“无法显示您的错误”。

关于您的情况：可能是，在Review 组件中，您正试图访问 undefined 属性上的某些内容，例如 review.text.length，并且有些评论没有此属性?

【讨论】：

这完全正确。我应该回来并给出答案，但在解决了我的错误后，我在如释重负的浪潮中忘记了。我不得不回到我是如何设置评论的。