Get multiple transformedSrc from a variant image

user_9248963 0
Viewed 583

I have a query:

query {
 productByHandle(handle: "${productHandle}") {
   variants(first: 3) {
     edges {
       node {
         title
         id
         priceV2 {
           amount
         }
         image {
           transformedSrc(maxWidth: 400)
          }
        }
      }
    }
  }
}

Which works great. However, I'm struggling to find the syntax to get multiple transformedSrcs from the variant image. I want to use this for an image srcset, so I'll need to have multiple sizes returned.

I'm new to GraphQL in general. I tried an array on the image, using an AND with multiple maxWidth and scale, duplicating the image piece, etc. I've also searched the Shopify API docs many times.

Is this just not possible for some reason, or am I missing something?

shopify-api shopify graphql
1 Answers

I'm also curious for answers and new to GraphQL. I seem to have had some success using aliases of transformedSrc in the query, see below. Not entirely sure if this is the correct way though. I'm surprised by the lack of info consider it's essential for fast loading sites.

query {
  collectionByHandle(handle: "archived") {
    products(first: 250) {
      edges {
        node {
          id
          title
          description
          tags
              images(first: 100) {
      edges {
        node {
          altText
          originalSrc
          smallImage: transformedSrc(maxWidth: 200, crop: CENTER)
          bigImage: transformedSrc(maxWidth: 400, crop: CENTER)
        }
      }
    }
        }
      }
    }
  }
}
user_44388770
Related