Axios, JS Buy SDK, Storefront API, "Parse error"

Solved
jackgeorge11
Tourist
4 2 0

This has been doing my head in. I am trying to retrieve metafields from my storefront API. I have exposed the metafields with Postman. Postman post requests return the metafields properly: 

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

Now to get this data in my shop, which uses the JS Buy SDK and is pretty much solely React (no backend). The shop is functional and works like a charm (cart and buy functionality, etc.), but now I am making an update that requires metafields and I can't figure out how to get the metafields into my app.

First I tried doing so with the Javascript Buy SDK, by using the unoptimized UMD build, but the requests just doesn't return anything. This code is taken from: https://shopify.github.io/js-buy-sdk/#expanding-the-sdk documentation. Here are examples:

 

// Build a custom products query using the unoptimized version of the SDK
const productsQuery = client.graphQLClient.query((root) => {
  root.addConnection('products', {args: {first: 10}}, (product) => {
    product.add('title');
    product.add('tags');// Add fields to be returned
  });
});

// Call the send method with the custom products query
client.graphQLClient.send(productsQuery).then(({model, data}) => {
  // Do something with the products
  console.log(model);
});

 

 

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

The above code logs an array of products (see image), including each product's titles and tags, in the console. So it works. Then I try it with metafields:

 

// Build a custom products query using the unoptimized version of the SDK
const productsQuery = client.graphQLClient.query((root) => {
  root.addConnection('products', {args: {first: 10}}, (product) => {
    product.add('title');
    product.add('metafields');// Add fields to be returned
    // also tried: product.add('metafield'), non-plural
  });
});

// Call the send method with the custom products query
client.graphQLClient.send(productsQuery).then(({model, data}) => {
  // Do something with the products
  console.log(model);
});

 

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

So doing product.add('metafields'), or product.add('metafield') logs undefined in the console. However, if I try product.add('blah blah blah'), the console throws an error and the app crashes. The error reads: Unhandled Rejection (Error): No field of name "blah blah blah" found on type "Product" in schema.

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

So there is obviously a field named metafields, but not a field that is gibberish, but for whatever reason when I product.add('metafields') the whole object comes back undefined. I have no idea what to do about this. So I decided to try to just use axios to post the Storefront API and retrieve the metafields that way. Here is my axios.post request:

 

const api = 'https://<shop name>.myshopify.com/api/2021-07/graphql.json'
      const headers = {
        'X-Shopify-Storefront-Access-Token': '<access token>',
        'Content-Type': 'application/graphql',
        'Accept': 'application/json',
      }
      const body = {
          query: `
            products(first:10) {         
              edges {             
                node {                 
                  id                 
                  handle                 
                  metafields(first:10){                     
                    edges {                         
                      node {                             
                        key                             
                        value                         
                      }                     
                    }                 
                  }             
                }         
              }     
            }
          `
      }
      await Axios.post(
        api,
        body,
        {headers: headers})
      .then((result) => console.log(result.data))
      .catch((error) => {
          console.log(error.response);
      })

 

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

And if I change the Content-Type Header from application/graphql to application/json, I get this parse error instead:

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

 Can someone please help me. I'm relatively new to graphQL, but that request works as shown in the first image on PostMan. I either need a way to make this axios post work, or a way to retrieve metafields in the Buy SDK.

 

Thank you in advance! Sorry for the long post, posting the whole process for others with similar problems.

Accepted Solution (1)

Accepted Solutions
jackgeorge11
Tourist
4 2 0

This is an accepted solution.

THIS WORKED:

 

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'}}
      )
Copy

View solution in original post

Reply 1 (1)
jackgeorge11
Tourist
4 2 0

This is an accepted solution.

THIS WORKED:

 

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'}}
      )
Copy