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

Posted 2023-03-08

【中文标题】使用 React 查询 GraphQL 时 JSON 意外结束，而 GraphiQL 没有问题

【英文标题】：Unexpected end of JSON on GraphQL query with React while no issue with GraphiQL

【发布时间】：2019-07-02 13:15:52

【问题描述】：

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

【问题讨论】：

检查“网络”选项卡中显示的实际服务器响应。 Unexpected end of JSON input 表示服务器在处理请求时遇到某种问题并返回错误消息而不是 JSON 对象。 CORS 配置通常是罪魁祸首，但它可能很简单，例如端点 URL 中的拼写错误。如果您仍然无法诊断问题，请检查该消息并将其包含在您的问题中。

谢谢@DanielRearden 我刚刚用结果更新了问题。我觉得不错！

好的，下一个可能的罪魁祸首是 apollo 客户端和/或链接配置。

没错。但我最大的痛苦是不确定在哪里可以找到“错误”，当我知道到底是什么错误时，我确定我可以修复。

你能发布你的客户端配置吗？

【参考方案1】：

好的，我找到了。

第一个问题是我在ApolloClient 上使用了no-cors 选项，这会阻止它准备好数据，从而发回一个空数据对象。

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

第三个也是最后一个问题是 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 方面还有其他解决方案，但还没有找到。

【参考方案2】：

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

然后将 uri 设置为“/graphql”