Shopify GraphQL using fetch API, returns empty json, no errors

Question

Trying to just fetch the name of my store in a React component using the Fetch API and GraphQL endpoint of Shopify.

I created a Shopify store, gave permissions to the Storefront API and crafted this in my componentDidMount() section of my react component.

let query = '{ shop { name } }';
console.log(JSON.stringify(query));

fetch('https://myStoreName.myshopify.com/api/graphql', {
        method: "POST",
        headers: {
            "Content-Type": "application/graphql",
            "X-Shopify-Storefront-Access-Token": "<My API Key>"
        },
        body: JSON.stringify(query),
    })
  .then(function(myJson) {
    console.log('fetched');
    console.log(JSON.stringify(myJson));
  });

My console log output:

"{ shop { name } }"
App.js:21 fetched
App.js:22 {}

I'm not even getting an error, makes me think it's going through possibly? But can't find my shop's name in this query?

I think overall I don't know best practices to craft a GraphQL query in Javascript. Do I make a large string or just a normal, JSON to represent it?

*Also I'm trying not to use a graphQL client library at the moment, and just to use fetch API.

Daniel Rearden · Accepted Answer · 2018-10-20 00:38:33Z

3

You can't read the response the fetch call resolves to directly like that. Instead, you should call whatever method is appropriate for the mime type you're fetching. From the Mozilla docs:

Once a Response is retrieved, there are a number of methods available to define what the body content is and how it should be handled.

For JSON, you call the json method. You can see more examples here. That means your code should look more like this:

fetch(...)
  .then(res => res.json())
  .then(console.log)

Also, please bear in mind that you don't need to stringify your query. You should probably use the application/json content type (which is standard, I believe) and wrap your query inside an object like this.

body: { query },

Then if you have variables, these can be included in the same object:

body: { query, variables }

edited Oct 20, 2018 at 0:38

answered Oct 20, 2018 at 0:11

Daniel Rearden

85.3k14 gold badges205 silver badges193 bronze badges

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

2 Comments

Kyle Calica-St Over a year ago

d'oh! I forgot how promises work there for a minute and realized i had stringify()and not json() appended! Thank you! And I'll def. why does mine only work when body: query and not when body: { query }, is that because I have it as query { ... } ?

Daniel Rearden Over a year ago

oops sorry just noticed you're using the application/graphql mimetype... it'll work if you change that to application/json. I'll update my answer

Collectives™ on Stack Overflow

Shopify GraphQL using fetch API, returns empty json, no errors

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related