How to fetch multiple image sizes

Retired Boards Appdev Custom Storefronts
1

Hi,

I’m trying to add different image sizes for the img srcset but I can’t figure out how to query multiple images at once. Would also be nice if I could get the image width and height for the transformed images but I think that that is not possible in Shopify?

My current code:

root.addConnection("products", { args: { first: limit } }, (product) => {
    product.add("title");
    product.add("handle");
    product.add("availableForSale");
    product.add("descriptionHtml");
    product.addConnection("images", { args: { first: limit } }, (image) => {
        image.add("src");
        image.add("url", { args: { transform: { maxHeight: 800 } } });
        
        // I found this example but dont know how to add it to the .add("url" syntax
        // smallImage: transformedSrc(maxWidth: 200, crop: CENTER)
        // bigImage: transformedSrc(maxWidth: 400, crop: CENTER)

        image.add("width");
        image.add("height");
        image.add("altText");
    });
 });

I found this: smallImage: transformedSrc(maxWidth: 200, crop: CENTER) but I dont know how to add it to the .add(“url” syntax.
Link to the smallImage: transformedSrc: https://stackoverflow.com/a/63810796