Graphql admin API - Unexpected end of JSON input

Highlighted
Shopify Partner
6 0 2

Hi! I try to use Shopify ADMIN Graphql in my app(embedded). 

First of all I have tried make curl request 

curl -X POST \
"https://<SHOP>.myshopify.com/admin/api/graphql.json" \
-H "Content-Type: application/graphql" \
-H "X-Shopify-Access-Token: <ACCESS_TOKEN>" \
-d '
{
  shop {
    name
  }
}
'

Everything is okay! I have got correct response. 
But when I have tried to make request from react ocmponent using Apollo Clien t I have got the error. 
This is my code

import ApolloClient from "apollo-boost";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: 'https://ivan-prokopenko.myshopify.com/admin/api/graphql.json',
  headers: {
    "X-Shopify-Access-Token": 'token',
    "Content-Type": "application/graphql"
  },
  fetchOptions: {
    mode: 'no-cors',
  }
});

client
      .query({
        query: gql`
        {
          shop {
            name
          }
        }
      `
      })
      .then(result => console.log(result));

I have got the 400 Bad request.
ApolloError.js:25 Uncaught (in promise) Error: Network error: Unexpected end of JSON input
at new ApolloError (ApolloError.js:25)

Does graphql admin api works in this case? Where could be the problem? Please help and thank you very much.  


2 Likes
Highlighted
New Member
1 0 1

I have same problem. Only when I try to connect with Apollo Client. Tried to contact support and everything, but nobody can help me. With Insomnia it work great, also on Node.js server work great. Only problem with Apollo Client.

1 Like
Highlighted
Tourist
5 0 4

Same here using ApolloClient in an embedded app. No matter how simple the query is, the server responds with 400 (Bad Request) and graphQLErrors.map is not a function. It might be a credentials or http-header issue but there is really no tool to troubleshoot this issue correctly.

0 Likes
Highlighted
Tourist
5 0 4

I finally got it to work! There seemed to be a problem with apollo-boost not forwarding credentials (based on this discussion) and headers needed to be defined. After some tweaking I got to a solution that works for me:

 
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: new createHttpLink({
    credentials: 'include',
    headers: {
      'Content-Type': 'application/graphql',
    }
  }),
  cache: new InMemoryCache(),
})
 
3 Likes
Highlighted
Shopify Partner
6 0 2

Nice man! Good job! But I am wondering where you use your token?

0 Likes
Highlighted
Tourist
5 0 4

I believe you should not have to reference your token within the React components. Using credentials: 'include' will identify you without compromising the token.

0 Likes
Highlighted
New Member
2 0 0

Hello,

 

It doesn't work for me.

I loaded a react component in my view

 

<%= react_component("orders/GeneralOrderView", { error: true, orders: @orders, shop: @shop }) %>
In my GeneralOrderView 
 
import React from "react";
import PropTypes from "prop-types";
import OrderList from './OrderList';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import {
    AppProvider,
} from '@shopify/polaris';

const httpLink = 
            createHttpLink({
                credentials: 'include',
                uri: ShopifyApp.shopOrigin+'/api/2019-07/graphql',
            });

const middlewareLink = setContext(() => ({
    headers: {
        'Content-Type': 'application/graphql'
    },
}));

const client = new ApolloClient({
    link: middlewareLink.concat(httpLink),
    cache: new InMemoryCache(),
});

class GeneralOrderView extends React.Component {
    render() {
        return (
            <AppProvider
                shopOrigin={ShopifyApp.shopOrigin}
                apiKey={ShopifyApp.api_key}
                forceRedirect
            >
                <ApolloProvider client={client}>
                    <OrderList error={this.props.error} orders={this.props.orders} shop={this.props.shop} />
                </ApolloProvider>
            </AppProvider>
        );
    };
}
I have already this response :
 
Access to fetch at 'https://*******.myshopify.com/api/2019-07/graphql' from origin 'https://my-app.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
I don't understand why ?
 
If i used fetchOption 'no-cors' I obtain http response 415 :(
 
Have you got a same problem ?
 
All the best.
ToM
0 Likes
Highlighted
Shopify Partner
6 0 2

Hm wird

0 Likes
Highlighted
New Member
2 0 0

Hello,

 

You can see my component is wrapped in AppProvider ;)

 

ToM

0 Likes
Highlighted
New Member
1 0 0

You can update Network error: Unexpected end of JSON input in shopify.

0 Likes