Я пытаюсь сделать очень простой запрос через React с Apollo.
Когда я делаю этот запрос в GraphiQL, я хорошо получаю свои результаты, но в своем приложении я получаю неопределенный объект данных. И ошибка с сообщением:
Network error: Unexpected end of JSON input
Запрос:
query {
category(id: 3) {
id
children {
id
name
}
}
}
это мой компонент
import React, { Component } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
const CATEGORIES_LIST = gql`
query CATEGORIES_LIST {
category(id: 3) {
id
children {
id
name
}
}
}
`;
class Cat extends Component {
render() {
return (
<div>
<p>Items!</p>
<Query query = {CATEGORIES_LIST}>
{payload => {
console.info(payload);
return <p>fetch done!</p>;
}}
</Query>
</div>
)
}
}
export default Cat;
В то время как ответ GraphiQL с точно таким же запросом
{
"data": {
"category": {
"id": 3,
"children": [
{
"id": 4,
"name": "Bags"
},
{
"id": 5,
"name": "Fitness Equipment"
},
{
"id": 6,
"name": "Watches"
}
]
}
}
}
Кстати, я запрашиваю локальный сервер Magento 2.3 graphql.
При проверке вкладки сети это ответ, который я получаю от конечной точки graphql. Таким образом, в ответе нет опечатки URL.
{
"data":{
"category":{
"id":3,
"children":[
{
"id":4,
"name":"Bags",
"__typename":"CategoryTree"
},
{
"id":5,
"name":"Fitness Equipment",
"__typename":"CategoryTree"
},
{
"id":6,
"name":"Watches",
"__typename":"CategoryTree"
}
],
"__typename":"CategoryTree"
}
}
}
Спасибо @DanielRearden, я только что обновил вопрос с результатами. Выглядит хорошо для меня!
Итак, следующим вероятным виновником является клиент apollo и/или конфигурация ссылки.
Точно. но моя самая большая боль не уверена, где именно найти «эту» ошибку, я уверен, что смогу исправить, когда знаю, что именно не так.
Можешь выложить конфиг клиента?
Что бы это ни стоило, возможно, это могло быть из-за плохого импорта где-то: github.com/apollographql/react-apollo/issues/…
Это вполне может быть проблемой в последнем комментарии к вашей ссылке @DanielRearden, я добавил {mode: 'no-cors'}, потому что у меня были проблемы с этим.





Хорошо, я нашел это.
Первая проблема заключалась в том, что я использовал опцию no-cors на ApolloClient, которая не позволяет ему подготовить данные, таким образом отправляя пустой объект данных.
Вторая проблема заключалась в том, что мне нужно было правильно установить заголовки CORS на моем сервере GraphQL, только для того, чтобы разработка принимала все с *, что решило это на этапе разработки.
Третья и последняя проблема заключалась в том, что Apollo отправляет запрос OPTIONS для предварительной проверки заголовков CORS, чтобы убедиться, что все разрешено. Magento 2.3 перевернул это, потому что это пустой запрос, что дает вам ошибку Unable to unserialize value.
Что я сделал для решения этой третьей проблемы, так это временное исправление основного файла во время развертывания. Необходимо изменить следующий файл: /vendor/magento/module-graph-ql/Controller/GraphQl.php
в строке 111 необходимо следующее
- $data = $this->jsonSerializer->unserialize($request->getContent());
+ $content = ($request->getContent() === '') ? '{}' : $request->getContent();
+ $data = $this->jsonSerializer->unserialize($content);
Я думаю, что есть другие решения для этого на стороне React/Apollo, но пока не нашел.
Вы добавили свой серверный URL-адрес в качестве прокси для React? Обычно это помогает. Добавьте его в package.json
затем установите uri на «/graphql»
Проверьте фактический ответ сервера, показанный на вкладке «Сеть».
Unexpected end of JSON inputозначает, что сервер обнаружил какую-то проблему при обработке запроса и вернул сообщение об ошибке вместо объекта JSON. Конфигурация CORS обычно является виновником, но это может быть что-то простое, например, опечатка в URL-адресе конечной точки. Прочтите сообщение и включите его в свой вопрос, если вы все еще не можете диагностировать проблему.