Graphql image size

Question

I am implementing Sitecore jss on Sitecore version 9.1.

I was wondering if there is a way to specify the image size (width/height) when querying using GraphQl.

Below is my current query which is returning an image too large for my site.

GraphQl Query

query ($datasource: String){
    item (path:$datasource){
    field(name:"Image")
    {
      jss
    }
  }
}

GraphQl Response

{
  "data": {
    "item": {
      "field": {
        "jss": {
          "value": {
            "src": "http://mydomain/-/media/image.png?h=1560&w=900&hash=FB9B94EFC9562A5265FDFD2123D9E044",
            "alt": "",
            "width": "900",
            "height": "1560",
            "style": "margin: 0px 0px"
          }
        }
      }
    }
  }
}

Answer 1

I found 2 solution for this issue and I ended using method 1 for the "hashed url" convenience.

Method 1: Using rendered(fieldRendererParameters)

query ($datasource: String){
    item (path:$datasource){
    field (name:"Image") {
      rendered(fieldRendererParameters:"w=100&h=160")
    }
  }
}

The result of this query is...

{
  "data": {
    "item": {
      "field": {
        "rendered": "<img src=\"/-/media/image.png?h=160&amp;w=100&amp;hash=A3B9D31108FCB37E099AA0A2AB19EA75\" alt=\"\" width=\"100\" height=\"160\" style=\"margin: 0px 0px\" />"
      }
    }
  }
}

Method 2: Using inline fragments to query the image src

Note that this method will require the size to be whitelisted via Sitecore config.

GraphQL Inline Fragment reference

query ($datasource: String){
    item (path:$datasource){
    field (name:"Image") {
      ... on ImageField{
        src(maxWidth:100)
      }
    }
  }
}

{
  "data": {
    "item": {
      "field": {
        "image": "/-/media/image.png?mw=100"
      }
    }
  }
}