Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
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://<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);
})
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.
Solved! Go to the solution
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'}}
)
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'}}
)