4

I had a very frustrating evening yesterday, trying to get the basic Shopify GraphQL Admin API example working with nodeJS. The original Shopify example code is here.

The problem is that my code returns a status 400 - Bad Request.

I have enabled a "private App" on my store and enabled all the APIs with read access. I carefully copied the apiKey, accessToken and store name from Shopify.

Can anyone point out if there is something wrong with my code? Many thanks.

Code:

import fetch from 'node-fetch';

const apiKey = 'xxxx';
const accessToken = 'yyyy';
const store = 'zzzz';
const hostName = store + '.myshopify.com';
const apiVersion = '2021-01';
const apiLocation = '/admin/api/';

const rootUrl = 'https://' + apiKey + ':' + accessToken + '@' + hostName + apiLocation + apiVersion + '/';

const shopGraphQl = 'https://' + hostName + apiLocation + apiVersion + '/graphql.json';
//const shopGraphQl2 = rootUrl + 'graphql.json';
//const urlTest = rootUrl + 'orders.json';

const url = shopGraphQl;

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

fetch   (
    url,
    {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-Shopify-Access-Token" : accessToken
        },
        body: JSON.stringify({
            body
        })
    }
)
.then(res => {
    console.log('status = ' + res.status + ' , ' + res.statusText);
})
.then(json => {
    console.log("data returned:\n", json);
})
.catch(err => console.error(err));;
DanJHill
  • 167
  • 2
  • 12

1 Answers1

3

It looks like you are sending body incorrectly. The way you are sending your body results in {body: { query: { shop { name } } } }

Instead of:

body: JSON.stringify({body})

change it to:

body: JSON.stringify(body)

Receiving data from fetch

You have noticed that your console.log statement, console.log("data returned:\n", json); is returning undefined. The reason for this is that you need to extract the json from the response (res.json()).

return fetch (
    url,
    {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-Shopify-Access-Token" : accessToken
        },
        body: JSON.stringify(body)
    }
)
.then(res => {
    console.log(`status = ${res.status}, ${res.statusText}`);
    return res.json();
})
.then(json => {
    console.log("data returned:\n", json);
})
.catch(err => console.error(err));;

Here is a decent reference on using fetch

Brettski
  • 19,351
  • 15
  • 74
  • 97
  • Thank you very much! That has solved it and given me the status 200 now. – DanJHill Mar 07 '21 at 09:36
  • Out of interest: Would you also know why I get returned Promise { } data returned: undefined – DanJHill Mar 07 '21 at 09:37
  • 1
    You should be returning the promise from your fetch: `return fetch(url,...`. where are your running this from that you are seeing that result? – Brettski Mar 07 '21 at 09:38
  • Thanks for the pointer. I will dig into this later today. Very much appreciated. This function is the only function run in my test program. – DanJHill Mar 07 '21 at 09:39
  • I am assuming you are running this from the NodeJS REPL (maybe `node filename.js`). Fetch returns a promise so you are seeing that. and no data is return so its undefined – Brettski Mar 07 '21 at 09:42
  • Yes run straight from NodeJS. Does this indicate that the server is simply returning no data? – DanJHill Mar 07 '21 at 09:44
  • 1
    Your not getting your JSON data from fetch. I will add it to the answer – Brettski Mar 07 '21 at 09:44