Media API doesn't return PreviewImage, or Width, or Height. Documentation says otherwise.

Stephen_Gardner
Shopify Partner
27 0 10

The Shopify Media API documentation (https://shopify.dev/tutorials/manage-product-media-with-admin-api) gives an example for "Retrieving media objects".  In this documentation it lists the following Query as an example:

{
  product(id:"gid://shopify/Product/1") {
    title
    media(first:5) {
      edges {
        node {
          ... fieldsForMediaTypes
        }
      }
    }
  }
}

fragment fieldsForMediaTypes on Media {
  alt
  mediaContentType
  position
  previewImage {
    id
    altText
    width
    height
    originalSrc
  }
  status
  ... on Video {
    id
    sources {
      format
      height
      mimeType
      url
      width
    }
    originalSource {
      format
      height
      mimeType
      url
      width
    }
  }
  ... on ExternalVideo {
    id
    embeddedUrl
  }
  ... on Model3d {
    sources {
      format
      mimeType
      url
    }
    originalSource {
      format
      mimeType
      url
    }
  }
  ... on MediaImage {
    id
    image {
      altText
      width
      height
      originalSrc
    }
  }
}

Unfortunately, several of these don't exist, such as the `width` and `height` of the image.

Reproduction steps:

  • Create a product, or simply log in to a shop that already has an existing product
  • Install Shopify GraphiQL app
  • Insert the example query above
  • Change `product(id:"gid://shopify/Product/1")` to be a product actually on your shop, with images.
  • Attempt to run the query, and note the afforementioned issues

Please  comment if you're experiencing this issue, or if you are not seeing such behaviour.

Thanks!

 

Replies 2 (2)
hassain
Shopify Staff (Retired)
623 104 154

Hi @Stephen_Gardner ,

 

Thank you for bringing this up, and thank you for being so thorough with the explanation and reproduction steps.

 

The documentation you linked (https://shopify.dev/tutorials/manage-product-media-with-admin-api) was written while this feature was still in developer preview only, which might explain why not everything mentioned in this document works exactly as written. 

 

For the fields of `width` and `height` on the 'MediaImage.image' type, these properties seem to only be available on the "unstable" API version. So to access these fields, update your request or your GraphiQL app to use API Version of 'unstable'. Eventually over time this will be released into a streamlined, dated, API version. 

 

For the field of 'Media.previewImage', it looks like that has been replaced in the current API version as 'Media.preview.image' instead. The field of 'Media.position' does not appear available in API version as far as I can tell.

 

With all this in mind, here is the updated query:

POST https://{shop-name}.myshopify.com/admin/api/unstable/graphql.json

{
  product(id:"gid://shopify/Product/1") {
    title
    media(first:5) {
      edges {
        node {
          ... fieldsForMediaTypes
        }
      }
    }
  }
}

fragment fieldsForMediaTypes on Media {
  alt
  mediaContentType
  preview {
    image {
        id
        altText
        width
        height
        originalSrc
    }
  }
  status
  ... on Video {
    id
    sources {
      format
      height
      mimeType
      url
      width
    }
    originalSource {
      format
      height
      mimeType
      url
      width
    }
  }
  ... on ExternalVideo {
    id
    embeddedUrl
  }
  ... on Model3d {
    sources {
      format
      mimeType
      url
    }
    originalSource {
      format
      mimeType
      url
    }
  }
  ... on MediaImage {
    id
    image {
      altText
      width
      height
      originalSrc
    }
  }
}

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

lokki54
Tourist
4 0 0

Thank you @hassain . You save me a day.

I wish you write a docs for shopify.