I am using GraphiQL Storefront API to fetch the inventory of some products that is required using product ID. I need to fetch the inventory via browser so I have to use Storefront API, I using the following query to get the inventory of each variant in each product.
export async function getProductInventory(productID) {
const productGID = "gid://shopify/Product/" + productID;
// console.log("productGID", productGID);
let data = await sendShopifyStorefrontRequest({
query: `
query getProductById($id: ID!) {
product(id: $id){
title
id
variants(first:100) {
nodes {
id
quantityAvailable
}
}
}
}`,
variables: { id: productGID },
});
// console.log("data", data);
if (data.product != null) {
data.product.id = data.product.id.split("Product/")[1];
data.product.variants.nodes = data.product.variants.nodes.map((v) => {
// console.log("v", v);
v.id = v.id.split("ProductVariant/")[1];
return v;
});
// console.log("--------data: ", data);
return data;
} else {
return { id: productID, inventory: 0 };
}
}
But there are too many products for which I need to fetch the inventory, it eventually gives out “Failed to Fetch” error for half of the products. Please help suggest solutions.
I have already implemented chunking, so that only a chunk of 5 products are processed at a time. I have also implemented exponential delay between retries when the query fails but this still runs into issues.