Graphql srcset does not except format argument in the same way url does as you'd expect.

[toddpadwick]

Description

I need to create webp versions of my asset URLs and srcsets generated in graphql. adding format to URL @transform argument works as expected. However, it does not work in the srcset argument. There is very little documentation that i can find on the srcset in graphql in the craft docs to provide further information on this.

    image {
         title
         width
         height
         url @transform(width: 300)
         srcset(sizes: ["300","600", "960", "1200"])
         url @transform(width: 300, format:"webp")
         srcsetWebp:srcset(sizes: ["300","600", "960", "1200"], format:"webp")
    }

I have tried to do this, but even if this approach would work it would be long winded and require repeating my srcset multiple times...

{ 
  imageWebp @transform(format: "webp") {
          title
         width
         height
         url @transform(width: 300) /// this does not work because the transform handle is applied above , however i only want the URL to be transformed to 300
         srcset(sizes: ["300","600", "960", "1200"])
  }

    image {
          title
         width
         height
         url @transform(width: 300)  // repeating myself
         srcset(sizes: ["300","600", "960", "1200"]) // repeating myself
  }

Additional info

PHP version 8.0.12
OS version Linux 4.15.0-50-generic
Database driver & version MySQL 8.0.23
Image driver & version Imagick 3.5.1 (ImageMagick 7.0.10-62)
Craft edition & version Craft Pro 3.7.20
Yii version 2.0.43
Twig version v2.14.8
Guzzle version 7.4.0

[andris-sevcenko]

There is very little documentation that i can find on the srcset in graphql in the craft docs to provide further information on this.

It's meant to serve as a reference at this point, though, as GraphQL is self-documenting. You should be able to find all the available information using the built-int GraphiQL IDE. If you check there, you'll see the srcset field only has the size argument. It's, of course, not very obvious that you would be better off looking inside GraphiQL IDE and we're looking into improving the docs, too, so they serve better.

As for your specific case, you can get away with using

{ 
  entries {
    ... on someEntryType {
      # This part is relevant
      imageWebp: assetField @transform(format: "webp") {
        ...defaultImageData
        url @transform(width: 300, format: "webp")
      }

      assetField {
        ...defaultImageData
        url @transform(width: 300)
      }
      # End relevant part
    }
  }
}

# Well the fragment is relevant, too
fragment defaultImageData on AssetInterface {
  title
  width
  height
  srcset(sizes: ["300","600", "960", "1200"])
}

Does that make sense?

[brandonkelly]

@olsp This may have been fixed by 32b0573. Please change your craftcms/cms requirement in composer.json to dev-develop as 4.0.2 and run composer update, and let m know if you still experience the issue.

[olsp]

Seems like nothing changes regarding this issue when switching to dev-develop.

[brandonkelly]

Is it working for imageWebp.url? I would expect it to not work for assetField.url as its @transform directive doesn’t specify a format.

[olsp]

Yes, it does work for imageWebp.url. But in imageWebp.srcset, there are no webp urls

[brandonkelly]

Fixed now for the next release, via #11413.

[brandonkelly]

Craft 4.0.5 is now out with the fix for this (#11413).