GraphQL API. Product image search does not return width and height

[pasha00m]

Hi, I make a request and get a response with the width and height of the image that are not set, why? The documentation says that this can happen if the images are not stored in Shopify, but I have all the images uploaded through the admin panel

Request

query MyQuery {
  shop {
    search(first: 1, types: PRODUCT, query: "") {
      edges {
        node {
          image {
            height
            url
            src
            width
          }
          title
        }
      }
      resultsAfterCount
    }
  }
}

Responce

{
    "data": {
        "shop": {
            "search": {
                "edges": [
                    {
                        "node": {
                            "image": {
                                "height": null,
                                "url": "https://cdn.shopify.com/s/files/....",
                                "width": null
                            },
                            "title": "Flower"
                        }
                    }
                ],
                "resultsAfterCount": 40
            }
        }
    },
    "extensions": {
        "cost": {
            "requestedQueryCost": 6,
            "actualQueryCost": 6,
            "throttleStatus": {
                "maximumAvailable": 1000.0,
                "currentlyAvailable": 994,
                "restoreRate": 50.0
            }
        }
    }
}

[ShopifyDevSup]

Hi @pasha00m, thanks for getting in touch! This was a great question and it took a bit of digging with our product team to investigate, so thank you for waiting on this reply. 

We found that that the image inside of a {shop { search is not the "real" image reference, which is why it's returning null values. The only surfaceable field in the object is the url field. That said, we were able to determine a GraphQL query on the Storefront API that would return the height and width values for product images. You would have to query the products object itself on root like this:

{
 products (first:1) {
   edges {
     node {
       id
       handle
       images (first:2) {
         edges {
           node {
             id
             height
             width
           }
         }
       }
     }
   }
 }
}

I've mentioned the discrepancy between the shop based query and this one to our developers though - I can't guarantee there will be a way to surface the height and width of a product image through the shop object, but I did want to mention I've passed this on as a report. 

Hope this helps!

[pasha00m]

Thanks for response! 

My task was to find a way to filter product images by their width and height, unfortunately the query parameter in the product object does not support this.

My application is not a sales channel, so I can't access Storefront API, I tried to generate a delegate token, but when I try to make a request, I get a 403 code

[ShopifyDevSup]

Hi @pasha00m!

Any app with the appropriate permissions can make calls to the Storefront API and nether changing the app to a Sales Channel nor delegate access tokens are required if you're simply looking at public facing image data.

The only difference between making an Admin and a Storefront API call in this case is that a public access token is required for the Storefront API call. You can get one by making an Admin API using the storefrontAccessTokenCreate mutation.

[pasha00m]

I tried this way, but I get a message: 

Access denied for storefrontAccessTokenCreate field.

The areas I request with Oauth:

"read_products",
"write_products",
"unauthenticated_read_product_listings",
"unauthenticated_write_checkouts",
"unauthenticated_write_customers",
"unauthenticated_read_customer_tags",
"unauthenticated_read_content",
"unauthenticated_read_product_tags",

X-Request-ID 09ccbde5-5ec0-4a06-b3d2-d1e0bddbe227

[pasha00m]

When accessing the API
https://{shop}.myshopify.com/admin/api/2022-10/storefront_access_tokens.json?title=test

I get an error:

{

"errors": "App must have a channel record to create a storefront access token."

}