Fetch API не может загрузить ошибку webpack://..

Я пытаюсь изучить некоторые новые приемы с помощью 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
      }
    }
  }

Мой запрос Apollo в компоненте NextJS:

    <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.info(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 все работает нормально, поэтому я знаю, что данные есть. Кроме того, если я обновляю страницу, она загружается правильно. Ошибка возникает только при первой загрузке страницы.

Может ли кто-нибудь указать мне правильное направление, как лучше структурировать этот запрос? Я знаю, что я близок, но мне не хватает чего-то незначительного. Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
7
0
5 285
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У меня была аналогичная ситуация с той же ошибкой, и я обнаружил, что в основном эта ошибка не связана конкретно с GraphQL или Apollo. Это ошибка react-error-overlay и в основном означает «Произошла ошибка, отображающая вашу ошибку» или «Не удалось отобразить вашу ошибку».

О вашем случае: может быть, в компоненте Review вы пытаетесь получить доступ к чему-то в свойстве неопределенный, например, review.text.length, и есть некоторые обзоры без этого свойства?

Это было совершенно правильно. Я должен был вернуться и дать ответ на это, но я забыл в волнах облегчения после исправления своих ошибок. Мне пришлось вернуться к тому, как я настроил обзоры.

Jordan Rhea 12.05.2019 05:02

Другие вопросы по теме