Incompatibility between images and media resources

GraphQL Admin API Troubleshooting
1

Since images under Product resource deprecated in graphql, I started to use media field. In one of the images media resource returns null although the old image field returns the field successfully.

{
product (id:"gid://shopify/Product/6796771524682") {
        images(first: 10) {
            edges {
                node {
                    src
                    id
                }
            }
        }
        id
        media(first: 10) {
          edges {
            node {
                id
                ... on MediaImage {
                image {
                  altText
                  id
                  url
                  width
                  height
                }
              }
            }
          }
        }

    }
}

{
    "data": {
        "product": {
            "images": {
                "edges": [
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28628908834890"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28564194525258"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28564194558026"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28564194263114"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28564194230346"
                        }
                    },
                    {
                        "node": {
                            "src": "https://cdn.shopify.com/s/files/xxx",
                            "id": "gid://shopify/ProductImage/28628908867658"
                        }
                    }
                ]
            },
            "id": "gid://shopify/Product/6796771524682",
            "media": {
                "edges": [
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20815871115338",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20819699138634",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 1140,
                                "height": 1140
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20881714905162",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20885545812042",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 1536,
                                "height": 2048
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20815871148106",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20819699171402",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 2048,
                                "height": 1536
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20815871180874",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20819699204170",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 2048,
                                "height": 1536
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20815871213642",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20819699236938",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 960,
                                "height": 960
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20815871246410",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20819699269706",
                                "url": "https://cdn.shopify.com/s/files/xxx",
                                "width": 1123,
                                "height": 1441
                            }
                        }
                    },
                    {
                        "node": {
                            "id": "gid://shopify/MediaImage/20881714937930",
                            "image": null
                        }
                    }
                ]
            }
        }
    }
}

removed urls for merchant privacy. See the last node

                            "id": "gid://shopify/MediaImage/20881714937930",
                            "image": null

Although image field returns a valid image.

Date: Fri, 03 Jan 2025 11:55:33 GMT
x-request-id: 1845a564-ef4f-4f56-9cf0-c3625eb5be42-1735905333

If I query the given MediaImage resource

{
  node(id: "gid://shopify/MediaImage/20881714937930") {
    ... on MediaImage {
      id
      alt
      createdAt
      fileStatus
      mimeType
      status
      updatedAt
      preview {
        status
      }
      image {
        id
        src
        originalSrc
      }
      originalSource {
        url
        fileSize
      }
    }
  }
}

{
    "data": {
        "node": {
            "id": "gid://shopify/MediaImage/20881714937930",
            "alt": "",
            "createdAt": "2022-04-02T14:16:05Z",
            "fileStatus": "READY",
            "mimeType": "image/heic",
            "status": "READY",
            "updatedAt": "2022-04-02T14:16:07Z",
            "preview": {
                "status": "FAILED"
            },
            "image": null,
            "originalSource": {
                "url": "https://shopify-shop-assets.storage.googleapis.com/s/files/1/d/22b5/0275/6975/0090/products/image_e47e8015-d606-457a-abdc-93509bc92928.heic?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=merchant-assets...",
                "fileSize": 384741
            }
        }
    }
}

Date: Fri, 03 Jan 2025 12:00:45 GMT
x-request-id: f2bcb9e3-da14-417f-9185-9ddb137ce810-1735905645

2

Shopify don’t support HEIC files, which probably why.
The status in preview would lead me to believe Shopify couldn’t process the file, hence no image.

The image requirements shopify supports are listed here Manage media for products

3

HEIC is supported as you can see here. The first valid image in this product is heic as well.

"node": {
                            "id": "gid://shopify/MediaImage/20881714905162",
                            "mimeType": "image/heic",
                            "image": {
                                "altText": "",
                                "id": "gid://shopify/ImageSource/20885545812042",
                                "url": "https://cdn.shopify.com/s/files/1/x/x/x/products/xxx.heic?v=1648909043",
                                "width": 1536,
                                "height": 2048
                            }
                        }
4

Was that uploaded before the move to GraphQL? :thinking:

5

You can see the created_at field for the resource above. I don’t know who and when added it. I just want to see consistent results if a field is replaced with another one. @Liam-Shopify anyone from the team can check this out?