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:
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);
});
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);
});
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.
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://
And if I change the Content-Type Header from application/graphql to application/json, I get this parse error instead:
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.