Please add a `query` to `ProductVariant.media`

New GraphQL Product APIs
1

The Product.media connection already allows us to query by media_type.

However, ProductVariant.media does not have the same query, which can be surprising.

Reasoning: I believe that when the vast majority of apps fetch variant data for display in their interface, they want an image, as opposed to other types of media, like video, etc. So, it’s incredibly useful to be able to efficiently fetch the first image associated with a variant.

2

Getting an image for a product is a bit confusing. I think it’s due to the discrepancy between images for products without variants and images for products with variants.

If there’s no variants:

    product(id: $id) {
      featuredMedia {
        preview {
          image {
            id
            url: transformedSrc(maxWidth: 1024, maxHeight: 1024)
          }
        }
      }

If there’s variants:

      query($id: ID!) {
        productVariant(id: $id) {
          image {
            id
            url: transformedSrc(maxWidth: 1024, maxHeight: 1024)
          }
        }
      }

Which results in application code like the following:

if product.default_variant?
  image = product_image(product.external_product_id)
else
  image = variant_image(product.external_variant_id)
  image = product_image(product.external_product_id) unless image
end

Seems a bit contrived

3

@sshaw, I didn’t know about the preview field. Interesting. I usually just take the first image on the product, with something like this:

product(id: "gid://shopify/Product/{product_id}") {
  first_image: media(first: 1, query: "media_type:IMAGE") {
    nodes {
      ... on MediaImage {
        image {
          url
        }
      }
    }
  }
}

The problem is when fetching variant images we can’t use query: "media_type:IMAGE".

The image field on productVariant is deprecated. That’s why I’m asking for an easy way to get the first image like we do on product.

4

Great more changes more inconsistencies

Great more changes more inconsistencies :joy: GraphQL the Perl of APIs