FROM CACHE - en_header

Axios, Storefront API, Parameter missing or invalid

Solved
jackgeorge11
Tourist
4 2 0

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.

Screen Shot 2021-09-05 at 10.16.40 AM.png

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:

 

Screen Shot 2021-09-05 at 12.28.50 PM.png

Accepted Solution (1)

Accepted Solutions
jackgeorge11
Tourist
4 2 0

This is an 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'}}
      )

View solution in original post

Replies 2 (2)
Vellir
Shopify Partner
134 29 37

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.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
- Manage your new arrivals with Newr
jackgeorge11
Tourist
4 2 0

This is an 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'}}
      )