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





У меня была аналогичная ситуация с той же ошибкой, и я обнаружил, что в основном эта ошибка не связана конкретно с GraphQL или Apollo. Это ошибка react-error-overlay и в основном означает «Произошла ошибка, отображающая вашу ошибку» или «Не удалось отобразить вашу ошибку».
О вашем случае: может быть, в компоненте Review вы пытаетесь получить доступ к чему-то в свойстве неопределенный, например, review.text.length, и есть некоторые обзоры без этого свойства?
Это было совершенно правильно. Я должен был вернуться и дать ответ на это, но я забыл в волнах облегчения после исправления своих ошибок. Мне пришлось вернуться к тому, как я настроил обзоры.