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"
      }
   }
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Kay Int Veen
  • 577
  • 1
  • 5
  • 17
  • 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. – Daniel Rearden Feb 08 '19 at 10:45
  • Thanks @DanielRearden i just updated the question with the results. Looks good to me! – Kay Int Veen Feb 08 '19 at 11:42
  • Ok, so the next likely culprit is apollo client and/or link config. – Daniel Rearden Feb 08 '19 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. – Kay Int Veen Feb 08 '19 at 12:36
  • Can you post your client config? – Daniel Rearden Feb 08 '19 at 12:39
  • For what it's worth, it's possible that it could be because of a bad import somewhere: https://github.com/apollographql/react-apollo/issues/599#issuecomment-294558808 – Daniel Rearden Feb 08 '19 at 12:44
  • It could very well be the issue in the last comment of your link @DanielRearden i added { mode: 'no-cors' } because i had issues with that. – Kay Int Veen Feb 08 '19 at 13:40

2 Answers2

15

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.

Kay Int Veen
  • 577
  • 1
  • 5
  • 17
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"

JasonC
  • 63
  • 8