Get the product with its all variant information

Hello there,

I have a Shopify store that I am rebuilding it using both Shopify and ReactJs.

My products are stored in Shopify but (most of the)frontend is ReactJs. I want to achieve this search layout (check the attached image and this website).

The problem is I want to get the product as a whole, not each variant by itself, I tried (distinct) but it only provides one variant information not all of them.

I also want to get the stock quantity of each variant and do some process over them. If I save this information in the metafield (as Algolia documentation suggests) it won’t reflect the quantity changes and I will end up with a static quantity that’s stayed the same even after the stock is changed. I can store the variant image in the metafield but that won’t be that useful if I don’t have the stock quantity.

How can I get a list of all the variants of the product together? Any kind of help will be much appreciated. Thanks.