12

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

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:

Network error: Unexpected end of JSON input

The query is:

query {
    category(id: 3) {
        id
        children {
            id
            name
        }
    }
}

This is my component

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;

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"
        }
      ]
    }
  }
}

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

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"
      }
   }
}
7
  • Check the actual server response shown in the Network tab. Unexpected end of JSON input means the server encountered some kind of issue when processing the request and returned an error message instead of a JSON object. CORS configuration is the usual culprit, but it could be something simple like a typo in the endpoint URL. Check the message and include it with your question if you still can't diagnose the problem. Commented Feb 8, 2019 at 10:45
  • Thanks @DanielRearden i just updated the question with the results. Looks good to me! Commented Feb 8, 2019 at 11:42
  • Ok, so the next likely culprit is apollo client and/or link config. Commented Feb 8, 2019 at 12:11
  • Exactly. but my biggest pain is not sure where to exactly find "the" error im sure i can fix when i know what exactly is wrong. Commented Feb 8, 2019 at 12:36
  • Can you post your client config? Commented Feb 8, 2019 at 12:39

2 Answers 2

16

Ok, i found it.

  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.

  2. 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.

  3. 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.

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

on line 111 the following is needed

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

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

Sign up to request clarification or add additional context in comments.

Comments

3

Did you add your backend url as Proxy to React?, that usually does the trick. Add it to the package.json

then set the uri to "/graphql"

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.