使用 React 的 GraphQL 查询意外结束 JSON，而 GraphiQL 没有问题

Question

我正在尝试通过 React with 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.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"
      }
   }
}

Answer 1

好的，我找到了。

第一个问题是我在 ApolloClient 上使用了 no-cors 选项，这会阻止它准备好数据，从而发回空数据 object。
第二个问题是我需要在我的 GraphQL 服务器上正确设置我的 CORS headers，只是为了接受所有带有 * 的开发，这在开发阶段解决了它。
第三个也是最后一个问题是 Apollo 发送了一个 OPTIONS 请求来预检 CORS headers 以查看是否全部允许。 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 方面还有其他解决方案，但尚未找到。

Answer 2

您是否将后端 url 添加为 React 的代理？，这通常可以解决问题。将其添加到 package.json

然后将 uri 设置为“/graphql”

使用 React 的 GraphQL 查询意外结束 JSON，而 GraphiQL 没有问题

Unexpected end of JSON on GraphQL query with React while no issue with GraphiQL

apollo

reactjs

magento2

graphql