Неожиданный конец JSON в запросе GraphQL с React при отсутствии проблем с GraphiQL

Я пытаюсь сделать очень простой запрос через 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"
      }
   }
}

Проверьте фактический ответ сервера, показанный на вкладке «Сеть». Unexpected end of JSON input означает, что сервер обнаружил какую-то проблему при обработке запроса и вернул сообщение об ошибке вместо объекта JSON. Конфигурация CORS обычно является виновником, но это может быть что-то простое, например, опечатка в URL-адресе конечной точки. Прочтите сообщение и включите его в свой вопрос, если вы все еще не можете диагностировать проблему.

Daniel Rearden 08.02.2019 11:45

Спасибо @DanielRearden, я только что обновил вопрос с результатами. Выглядит хорошо для меня!

Kay Int Veen 08.02.2019 12:42

Итак, следующим вероятным виновником является клиент apollo и/или конфигурация ссылки.

Daniel Rearden 08.02.2019 13:11

Точно. но моя самая большая боль не уверена, где именно найти «эту» ошибку, я уверен, что смогу исправить, когда знаю, что именно не так.

Kay Int Veen 08.02.2019 13:36

Можешь выложить конфиг клиента?

Daniel Rearden 08.02.2019 13:39

Что бы это ни стоило, возможно, это могло быть из-за плохого импорта где-то: github.com/apollographql/react-apollo/issues/…

Daniel Rearden 08.02.2019 13:44

Это вполне может быть проблемой в последнем комментарии к вашей ссылке @DanielRearden, я добавил {mode: 'no-cors'}, потому что у меня были проблемы с этим.

Kay Int Veen 08.02.2019 14:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
9
7
10 467
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Хорошо, я нашел это.

  1. Первая проблема заключалась в том, что я использовал опцию no-cors на ApolloClient, которая не позволяет ему подготовить данные, таким образом отправляя пустой объект данных.

  2. Вторая проблема заключалась в том, что мне нужно было правильно установить заголовки CORS на моем сервере GraphQL, только для того, чтобы разработка принимала все с *, что решило это на этапе разработки.

  3. Третья и последняя проблема заключалась в том, что 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»

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