Js-buy-sdk: Support for inventory quantity

[peeppirnpuu]

Hey, great job maintaining the libarary!

Curious to hear when could we access the product variant's quantityAvailable field?
https://shopify.dev/changelog/inventory-quantity-available-on-storefront-graphql-api

Link to API reference

[arobbins]

I was just looking for this last night. Support for this would be amazing!

Is anyone taking pull requests to make this happen?

[arobbins]

Quick update on this.

I've forked the repo and followed the contribution guide to attempt a pull request for this change. I'm _assuming_ it simply requires updating the VariantFragment and graphql schema. however I'm not too confident about that :)

I've tried updating the package locally with the above changes but still receive the error:

Field 'quantityAvailable' doesn't exist on type 'ProductVariant'

I'm guessing that in addition to these changes, Shopify needs to "enable" these fields on the API server.

I wonder if @StefanSlehta or @rebeccajfriedman could offer some guidance on which files to edit. Happy to do the work to make it happen.

[StefanSlehta]

Hi, Sorry for the delayed response

@arobbins The issue is that we're still on 2020-01 schema, which doesn't support the quantityAvailable field. I've opened a PR to update the api version which should allow you to pull this field in and open a PR for it!

[arobbins]

@StefanSlehta Awesome thank you!

[StefanSlehta]

Hey just an update, you can also expand the queries you'd like to use instead of adding to the VariantFragment.
We'll have to determine if adding quantityAvailable for everyone makes sense at the moment, mainly because fetching surplus fields starts slowing down the library for everyone even if they don't need all the fields. By expanding certain queries you can fetch exactly the things you need and still keep it relatively quick.
Hope this helps!

[arobbins]

@StefanSlehta

Thanks for the direction.

I managed to get the quantityAvailable field pulled in successfully this morning. I'm using the unoptimized UMD bundle and expanding the main query like you mentioned. Works great!

However I do have another question:

1. To get this to work, I needed to fetch the master branch, run a build, and then include the UMD bundle that way. Can we get this change pushed to a new 2.9.4 release? That way I can continue importing the package like normal. I definitely don't want to include an unoptimized build in my final product.

Since I'm expanding the query I wouldn't need to submit a PR.

Thanks again!

[StefanSlehta]

Just updated to 2.10.0, npm is there, CDN might take up to ~24h to bust the cache.

[arobbins]

You rock!

[wirsing]

@arobbins @StefanSlehta Thanks for this! Would you guys mind posting a short example on how to expand the query to pull the inventory field? I checked the link but can't get the query right. Thanks!

[obelmont]

@arobbins @StefanSlehta Thanks for this! Would you guys mind posting a short example on how to expand the query to pull the inventory field? I checked the link but can't get the query right. Thanks!

I'm building a static site (nextjs) that uses a useEffect hook to pull the available qty.
Below is the extended query I use to get this data.
Keep in mind that if the quantityAvaliable returns null it just means that the product's qty is not tracked!

``js const productAvailableQty = (handle) => { const qtyQuery = shopify.graphQLClient.query((root) => { root.add( "productByHandle", { args: { handle:${handle}` } },
(product) => {
product.add("title");
product.add("handle");
product.add("id");
product.addConnection(
"variants",
{ args: { first: 99 } },
(variant) => {
variant.add("id");
variant.add("availableForSale");
variant.add("quantityAvailable");
}
);
}
);
});
return shopify.graphQLClient
.send(qtyQuery)
.then((res) => JSON.parse(JSON.stringify(res.model.productByHandle)))
.catch(() => null);
};

[50bbx]

@obelmont what do you mean by saying that the quantity is not tracked?

[obelmont]

@50bbx It means that the product's available inventory is not tracked in Shopify. It's an option in the Inventory section of each product in Shopify's admin panel that is used to determine available stock to ensure you don't sell more than you have.

[socreative]

@obelmont I get
_No field of name "quantityAvailable" found on type "ProductVariant" in schema_

when I run the query :(