Can't Fetch Graphql Admin API with Koa-shopify-graphql-proxy

Highlighted
Tourist
5 0 1

Hey, 

I am trying to Fetch product details with the Graphql Admin API from my embedded app when a button click happens.

 

On my Server I am using Koa-shopify-graphql-proxy as middleware as per this tutorial

 

Server.js

const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');


app.prepare().then(() => {
...
server.use(graphQLProxy({ version: ApiVersion.July19 }));
...
}

 

I am calling fetch as suggested here for client script -> https://github.com/Shopify/quilt/tree/master/packages/koa-shopify-graphql-proxy

As per my understanding, with this I can make a call from client and Koa-shopify-graphql-proxy will handle all the authentication on its end and should return the data.

 

Component.js

 

const GET_PRODUCT = gql`
  query {
      product (id: "gid://shopify/Product/#######"){
          title
          id
          description
          onlineStoreUrl
      }
  }
`;


handleProductSelection = (selectPayload) => {
....
fetch('/graphql', {method: 'POST' ,credentials: 'include', body: GET_PRODUCT})
.then(function(response) {
    return response.json();
})
.then(function(myJson) {
    console.log(JSON.stringify(myJson));
});
....
}
I am getting the following error when I run this. 

 

 

 

Component.js: POST https://#####.ngrok.io/graphql 400 (Bad Request)
Component.js: {"errors":{"query":"Required parameter missing or invalid"}}

 

In the docs of Koa-shopify-graphql-proxy they don't write 'method: POST'. If I remove then I get an error that can't send 'body' in GET/HEAD request.

 

What is the issue here?

  1. Query?
  2. How the fetch is composed? Or should I use some other fetch like isomorphic?
  3. My app is a sales channel app, is there something related to that?

 

Appreciate any help here guys.

 

1 Like
Tourist
4 0 0

If you end up figuring it out please share your results. I'm also struggling with this. Cheers

0 Likes
Shopify Staff
Shopify Staff
1558 77 232

It looks to me like the body you're setting in your fetch request needs to instead be a JSON object. Requests to the GraphQL endpoint expect a JSON object with, at minimum, a query value. Here's what you can try:

 

fetch('/graphql', {method: 'POST', credentials: 'include', body: {"query": GET_PRODUCT}})

Let me know how that goes.

 

Cheers.

0 Likes
Tourist
4 0 0

 

Both: 

const body = {
      query: gql`
        query {
          shop {
            id
          }
        }
      `
    };

const response = await fetch('graphql', { method: 'POST', credentials: 'include', body: JSON.stringify(body) });

and

 

const body = {
    query: `
      query {
        shop {
          id
        }
      }
    `
  };

const response = await fetch('graphql', { method: 'POST', credentials: 'include', body: JSON.stringify(body) });

 

Return the same error: 

{"errors":{"query":"Required parameter missing or invalid"}} 

(Network Request Payloads below)

Screen Shot 2019-09-16 at 1.29.34 PM.pnggql`QUERY`Screen Shot 2019-09-16 at 1.35.48 PM.png`QUERY` 

0 Likes
Shopify Staff
Shopify Staff
1558 77 232

Hmm, ok strange. Would you mind making an issue here?

 

Cheers.

0 Likes
New Member
1 0 1

You need the content-type: "application/json" header.

 

Here's a working example

 

const body = {
query: `query {
shop {
id
}
}`
};

export default {
getShop: async () => {
await fetch("graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(body)
});
}
};

 

1 Like