Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Storefront API fetch product - Customize query

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

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


Reply 1 (1)

Shopify Partner
1033 86 282

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);