Axios、Shopify Storefront API、“参数丢失或无效”、“解析错误”

Question

I am stuck. I am trying to retrieve data from Shopify's Storefront API. The post requests work fine in postman. They are graphql http requests. here is a screenshot

So I copied the axios code from the postman app, and pasted it into my React app (which is just react and the shopify buy sdk). here is my code:

var data = JSON.stringify({
    query: `query {     
      shop {
          name
      }
  }`,
    variables: {}
  });

  var config = {
    method: 'post',
    url: 'https://<shop name>.myshopify.com/api/2021-07/graphql.json',
    headers: { 
      'X-Shopify-Storefront-Access-Token': '<access token>', 
      'Content-Type': 'application/json'
    },
    data : data
  };

  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error.response);
  });

And this is the error it returns: status 400, "parameter missing or invalid". So I tried something like this instead:

const url = 'https://<shop-name>.myshopify.com/api/2021-07/graphql.json'
  const headers = {
    'X-Shopify-Storefront-Access-Token': '<access token>',
    'Content-Type': 'application/json',
  }

await axios.post(
    url, // this is the same as the previous url
    {query: `
      shop {
        name
      }
    `},
    {headers: headers}) // headers are the same as previous headers
  .then((result) => console.log(result))
  .catch((error) => {
      console.log(error.response);
  });

and I now get a status 200, but with no store name. Rather, I get a parse error : "Parse error on "shop" (IDENTIFIER) at [2, 11]". And if I change my 'Content-Type' header to 'application/graphql', I get a similar parse error .

Please help. I have no idea how to get this to work. Thanks in advance.

Answer 1

First you must understand the error codes from graphql. The graphql endpoint always returns 200 when the POST was successfull, but there can be still a nested error by resolving your request.

Second, your query with TypedStringArray misses a query . It should look like

const url = 'https://<shop-name>.myshopify.com/api/2021-07/graphql.json'
  const headers = {
    'X-Shopify-Storefront-Access-Token': '<access token>',
    'Content-Type': 'application/json',
  }

await axios.post(
    url, // this is the same as the previous url
    {data : {
       query: `
         query GiveMeMyShop {
           shop {
             name
         }
       }
    `},
    {headers: headers}) // headers are the same as previous headers
  .then((result) => console.log(result))
  .catch((error) => {
      console.log(error.response);
  });

for the correct query syntax. But in all cases i recommend to use a gql client like apollo.

Answer 2

Got same issue and find the solution. The data should be an object {query:"xxxx"}; For GraphQL.

  var config = {
    method: 'post',
    url: 'https://<shop name>.myshopify.com/api/2021-07/graphql.json',
    headers: { 
      'X-Shopify-Storefront-Access-Token': '<access token>', 
      'Content-Type': 'application/json'
    },
     data: {
        query: `query {
            shop {
                name
              }
          }`,
      },
  };

response:

     method: 'post',
     url: 'https://qxxxx.myshopify.com/api/2022-04/graphql.json',
     data: '{"query":"query {\\n            shop {\\n                name\\n              }\\n          }"}'
>    },

Shopify graphQL Postman screenshot: