Unable to check variant inventory quantity using store front api by javascript SDK in shopify

[Suneel]

I want to check variant inventory quantity using store front api by javascript SDK in shopify.

But in this sdk there is no api for check variant inventory quanity.

I have use product fetch api

// Fetch a single product by ID

const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';

client.product.fetch(productId).then((product) => {

// Do something with the product

console.log(product);

});

But using this api I get only product available or not status.

So please help me how to check variant inventory quantity.

[c10s]

I believe you'll need to expand the SDK to get it to return the quantityAvailable field on the variant.

[Suneel]

I have already checked with Expanding the SDK but not getting variant quantity so please give some example how to do it. how to get variant inventory quantity using store front api by javascript SDK.

[c10s]

const productsQuery = client.graphQLClient.query((root) => {
  root.addConnection('products', {args: {first: 10}}, (product) => {
    product.add('title')
    product.addConnection('variants', {args: {first: 10}}, (variant) => {
      variant.add('quantityAvailable')
    })
  })
})

client.graphQLClient.send(productsQuery).then(({model, data}) => {
  model.products.forEach((product) => {
    product.variants.forEach((variant) => {
      // Inventory available for the variant
      console.log(variant.quantityAvailable)
    })
  })
})

Your access token also needs unauthenticated_read_product_inventory permissions.

[Suneel]

I have given that permission unauthenticated_read_product_inventory to access token.

I have used you given code but I get error "No field of name "quantityAvailable" found on type "ProductVariant" in schema" please check this error.

I am not understand what is this why I face this error. please see this screenshot: https://nimb.ws/pt8SMg

and please explain one more thing how to check the inventory of specific variant id?

 

[c10s]

Can you post the code you're currently using?

[Suneel]

I am testing on the development store and it is the code. please check

First I used javascript SDK file then add code. 

<script src="https://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js"></script>

<script type="text/javascript">

const client = ShopifyBuy.buildClient({

      domain: 'sr-test-demo1.myshopify.com',

      storefrontAccessToken: '428097587d43b5c47be2e3da41d16093'

    });

    const productsQuery = client.graphQLClient.query((root) => {

  root.addConnection('products', {args: {first: 10}}, (product) => {

    product.add('title')

    product.addConnection('variants', {args: {first: 10}}, (variant) => {

      variant.add('quantityAvailable')

    })

  })

});

client.graphQLClient.send(productsQuery).then(({model, data}) => {

  model.products.forEach((product) => {

    product.variants.forEach((variant) => {

      // Inventory available for the variant

      console.log(variant.quantityAvailable)

    })

  })

});

</script>

[c10s]

Make sure you use the unoptimized bundle: https://sdks.shopifycdn.com/js-buy-sdk/2.0.1/index.unoptimized.umd.min.js

Showing 200 units available for each variant.

[Suneel]

I have tried to use given javascript SDK link but there showing same error "No field of name "quantityAvailable" found on type "ProductVariant" in schema"

I have used this 

<script src="https://sdks.shopifycdn.com/js-buy-sdk/2.0.1/index.unoptimized.umd.min.js"></script>

[c10s · Accepted solution]

Here's a working version: https://codesandbox.io/s/sharp-antonelli-4hzkc?file=/src/index.js

I used v2.11.0 but I believe it should work the same on v2.1.0.

console output is:

Moringa Tablet Default Title 200
Shatavari Tablet Default Title 200
Karela Tablets Default Title 200
Ginger Tablet Default Title 200
Trifala Tablet Default Title 200
Wheat Grass Tablet Default Title 200
Neem Tablet Default Title 200
Ashwagandha Tablet Default Title 200
Herbal Hair Oil Default Title 200
Mahanarayan Oil Default Title 200

[Suneel]

Thanks

using 2.11.0 it is working fine.