Shopify Graphql Product Media Sources

Question

I'm writing graphql query to fetch a Shopify product, and I cannot figure out how to get the product's media sources. The only available fields in the MediaConnection! according to the docs and GraphiQl are alt, mediaContentType, and previewImage.

Simplified query below:

{
  productByHandle(handle: ${handle}) {
    media(first: 5) {
      edges {
        cursor
        node {
          alt
          mediaContentType
          previewImage {
            altText
            originalSrc
            transformedSrc(maxWidth: 500, maxHeight: 400, crop: CENTER, preferredContentType: JPG)
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
    }   
  }
}

This is fine if I don't have any video in the media, the previewImage will suffice, but, what if the mediaContentType is video? How do I get the sources of the Video?

In this help article it shows handling video different from images. — JHeth

kenput3r kenput3r · Accepted Answer · 2020-07-10T20:04:25

Thanks to the comment from @JHeth pointing me in the direction of this [help article][1], I was able to figure this out. I needed to use fragments.

{
  productByHandle(handle: ${handle}) {
    media(first: 5) {
      edges {
        cursor
        node {
          alt
          mediaContentType
          previewImage {
            altText
            originalSrc
            transformedSrc(maxWidth: 500, maxHeight: 400, crop: CENTER, preferredContentType: JPG)
          }
          ... on Video {
            sources {
            format
            height
            mimeType
            url
            width
            }
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
    }   
  }
}

  [1]: https://shopify.dev/tutorials/manage-product-media-with-admin-api#retrieving-media-objects

Shopify Graphql Product Media Sources

1 Answers