Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Storefront API fetch product - Customize query

Storefront API fetch product - Customize query

city17
Tourist
8 0 0

Hi, I'm trying to fetch product details when someone clicks a different variant of a product. Specifically I'd like to know the 'quantityAvailable' for each variant.

However, the standard fetch method as described in the docs (see here) does not return quantityAvailable.

client.product.fetch(productId).then((product) => {
  // Do something with the product
  console.log(product);
});

Is there any way to change what fields/data get returned from this fetch method?

Rob

Reply 1 (1)

Gregarican
Shopify Partner
1033 86 292

Looking at the docs, you could create a custom GraphQL query that returns the on-hand availability, right? Based on the doc example below, you could pull the product variant's availability by modifying the actual GraphQL query I believe. Something to the effect of 

 

 root.addConnection('productvariant', {args: {id: 'gid://shopify/ProductVariant/1234567890}}, (productvariant) =>
// Pull the fields you want, such as drilling into inventory item's on-hand availability...

 

 

Fetching Products

// 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 queryclient.graphQLClient.send(productsQuery).then(({model, data}) => {
  // Do something with the products  console.log(model);
});