Неожиданное завершение JSON в запросе GraphQL с React, но без проблем с GraphiQL - PullRequest
Новая
       33

Неожиданное завершение JSON в запросе GraphQL с React, но без проблем с GraphiQL

0 голосов
/ 08 февраля 2019

Я пытаюсь выполнить очень простой запрос через React с Apollo.

Когда я делаю этот запрос в GraphiQL, я приятно получаю свои результаты обратно, но в своем приложении я получаю неопределенный объект данных.И ошибка с сообщением:

Ошибка сети: неожиданный конец ввода JSON

Запрос: 

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.log(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"
      }
   }
}

1 Ответ

0 голосов
/ 08 февраля 2019

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

  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, но естьпока не нашел этого.

...