带有React的GraphQL查询上的JSON意外结束，而GraphiQL没有问题 [英] Unexpected end of JSON on GraphQL query with React while no issue with GraphiQL

问题描述

我正在尝试通过React with Apollo进行一个非常基本的查询.

I am trying to do a very basic query via React with Apollo.

当我在GraphiQL中执行此查询时，很好地返回了我的结果，但是在我的应用程序中，我得到了一个未定义的数据对象.并显示一条错误消息:

When I do this query in GraphiQL I nicely get my results back but in my app I get an undefined data object. And a error with a message:

网络错误:JSON输入意外结束

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.log(payload);
                        return <p>fetch done!</p>;
                    }}
                </Query>
            </div>
        )
    }
}

export default Cat;

虽然GraphiQL响应的请求完全相同

While the GraphiQL response is with the exact same request

{
  "data": {
    "category": {
      "id": 3,
      "children": [
        {
          "id": 4,
          "name": "Bags"
        },
        {
          "id": 5,
          "name": "Fitness Equipment"
        },
        {
          "id": 6,
          "name": "Watches"
        }
      ]
    }
  }
}

通过查询本地Magento 2.3 graphql服务器的方式.

By the way I'm querying a local Magento 2.3 graphql server.

当检查网络选项卡时，这是我从graphql端点获得的响应.因此，响应中不会出现网址拼写错误

When inspecting the network tab this is the response i get from the graphql endpoint. So no url typo are issue in the response

{
   "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. 第一个问题是我在ApolloClient上使用了no-cors选项，该选项阻止它准备数据，从而发回空数据对象.

1. First issue was that i used no-cors option on the ApolloClient Which prevents it from ready the data thus sending back a empty data object.

第二个问题是，我需要在GraphQL服务器上正确设置CORS标头，只是为了在开发阶段接受带有*的所有*来解决该问题.

Second issue was that I needed to set my CORS headers on my GraphQL server properly, just for development accepting all with a * that solved it for the development phase.

第三个也是最后一个问题是Apollo发送了OPTIONS请求进行预检，以检查CORS标头以查看是否全部允许. Magento 2.3对此进行了翻转，因为它的请求为空，从而为您提供了Unable to unserialize value错误.

Third and last issue was that Apollo sends a OPTIONS request to preflight check the CORS headers to see if its all allowed. Magento 2.3 flipped over that because its an empty request thus providing you with a Unable to unserialize value error.

我要解决的第三个问题是在部署过程中临时修补核心文件.需要更改以下文件:/vendor/magento/module-graph-ql/Controller/GraphQl.php

What i did to solve that third issue is temporary patching a core file during deployment. The following file needs to be changed: /vendor/magento/module-graph-ql/Controller/GraphQl.php

在第111行，需要以下内容

on line 111 the following is needed

 - $data = $this->jsonSerializer->unserialize($request->getContent());
 + $content = ($request->getContent() === '') ? '{}' : $request->getContent();
 + $data = $this->jsonSerializer->unserialize($content);

我认为在React/Apollo方面还有其他解决方案，但是还没有找到解决方案.

I think there are other solutions for this on the React / Apollo side but haven't found that one yet.

这篇关于带有React的GraphQL查询上的JSON意外结束，而GraphiQL没有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！