Axios, Storefront API, Parameter missing or invalid

[jackgeorge11]

I've spent hours on this, someone please help. Trying to retrieve metafields from the Shopify storefront API with axios. Metafields are exposed. The post request works in Postman just fine. See image below.

I have literally copied Postman's axios code verbatim and, and it returns a 404 error every time. I have tried lots of different things but to no avail. Can someone please tell me what I'm doing wrong? Here is my code: 

      var data = JSON.stringify({
        query: `query {     
        products(first:10) {         
          edges {             
            node {                 
              id                 
              handle                 
              metafields(first:10){                     
                edges {                         
                  node {                             
                    key                             
                    value                         
                  }                     
                }                 
              }             
            }         
          }     
        }
      }`,
        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);
      });

Here is the error:

 

[Vellir]

Hi jackgeorge11,

Is it necessary to encode the data?

May you can just do this:

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 {     
        products(first:10) {         
          edges {             
            node {                 
              id                 
              handle                 
              metafields(first:10){                     
                edges {                         
                  node {                             
                    key                             
                    value                         
                  }                     
                }                 
              }             
            }         
          }     
        }
      }`,
  },
};

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

Let me know how that goes.

[jackgeorge11 · Accepted solution]

This is my issue haha. You think this code would work splendidly, but it returns a 400 status error...

I figured it out and for whatever reason, this code works properly:

await axios.post(
        'https://<store name>.myshopify.com/api/2021-07/graphql.json',
        {query: `
            query {     
              products(first:10) {         
                edges {             
                  node {                 
                    id                 
                    handle                 
                    metafields(first:10){                     
                      edges {                         
                        node {                             
                          key                             
                          value                         
                        }                     
                      }                 
                    }             
                  }         
                }     
              }
            }
        `},
        {headers: {'X-Shopify-Storefront-Access-Token': '<token>', 'Content-Type': 'application/json'}}
      )