Products in Collection > All Product Variants > Variant Availability

Retired Boards Appdev Custom Storefronts
1

Hello!

I am able to return all products in a collection and see all of the product variants in the console. The object I am using is productCollection which is equal to an SWR collection API fetch, as follows:

const { data: { products: { edges: productCollection = [] } = {} } = {} } =
    useSWR(collectionTitle, title =>
      shopifyCollectionService.getCollectionByName(title)
    ) || {};

I use

console.log(productCollection)

to return all products in the collection and can see all of the variants within edges and nodes.

If I do

console.log(productCollection[0])

the first variant in the collection returns.

My question is how can I return the first product in the collection, AND all of its variants, AND if the variants are available for sale?

Any insight would be greatly appreciated!

This on a NextJS Headless Shopify Web application with Typescript.