[4.x]: GraphQL image transform lost when using different interfaces

[Wiejeben]

What happened?

Description

We are unable to apply image transforms on a field with similar names to the other GraphQL types/interfaces. The asset field used is actually exactly the same one on all of the article_...._Entry types.

Steps to reproduce

Source image is a JPG.

Sample image transform:

format: webp
handle: articleLarge
height: 562
interlace: none
mode: crop
name: 'Article groot'
position: center-center
quality: null
width: 376

GraphQL query:

entries(section: "articles") {
    ... on articles_news_Entry {
        articleLarge: articlePhoto @transform(handle: "articleLarge") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleMedium: articlePhoto @transform(handle: "articleMedium") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleSmall: articlePhoto @transform(handle: "articleSmall") {
            url
            srcset(sizes: ["1x", "2x"])
        }
    }

    ... on articles_workshop_Entry {
        articleLarge: articlePhoto @transform(handle: "articleLarge") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleMedium: articlePhoto @transform(handle: "articleMedium") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleSmall: articlePhoto @transform(handle: "articleSmall") {
            url
            srcset(sizes: ["1x", "2x"])
        }
    }

    ... on articles_event_Entry {
        articleLarge: articlePhoto @transform(handle: "articleLarge") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleMedium: articlePhoto @transform(handle: "articleMedium") {
            url
            srcset(sizes: ["1x", "2x"])
        }
        articleSmall: articlePhoto @transform(handle: "articleSmall") {
            url
            srcset(sizes: ["1x", "2x"])
        }
    }
}

Expected behavior

{
  "articleLarge": [
    {
      "url": "/upload/images/_articleLarge/32646147/pascal.webp",
      "srcset": "/upload/images/_articleLarge/32646147/pascal.webp, /upload/images/_752x1124_crop_center-center_none/32646147/pascal.webp 2x"
    }
  ],
  "articleMedium": [
    {
      "url": "/upload/images/_articleMedium/32646147/pascal.webp",
      "srcset": "/upload/images/_articleMedium/32646147/pascal.webp, /upload/images/_1504x828_crop_center-center_none/32646147/pascal.webp 2x"
    }
  ],
  "articleSmall": [
    {
      "url": "/upload/images/_articleSmall/32646147/pascal.webp",
      "srcset": "/upload/images/_articleSmall/32646147/pascal.webp, /upload/images/_958x644_crop_center-center_none/32646147/pascal.webp 2x"
    }
  ]
}

Actual behavior

{
  "articleLarge": [
    {
      "url": "/upload/images/pascal.jpg",
      "srcset": "/upload/images/pascal.jpg, /upload/images/_956xAUTO_crop_center-center_none/pascal.jpg 2x"
    }
  ],
  "articleMedium": [
    {
      "url": "/upload/images/pascal.jpg",
      "srcset": "/upload/images/pascal.jpg, /upload/images/_956xAUTO_crop_center-center_none/pascal.jpg 2x"
    }
  ],
  "articleSmall": [
    {
      "url": "/upload/images/pascal.jpg",
      "srcset": "/upload/images/pascal.jpg, /upload/images/_956xAUTO_crop_center-center_none/pascal.jpg 2x"
    }
  ]
}

Craft CMS version

4.2.4

PHP version

8.1.7

Operating system and version

Docker php alpine 8.1

Database type and version

MySQL 8.0.28

Image driver and version

Imagick 3.7.0 (ImageMagick 7.1.0-16)

Installed plugins and versions

[brianjhanson]

Thanks for reporting! I was able to track this down to these lines which create an array with aliases as the key. Since your use case uses the same aliases for different assets, we lose track of half of the transforms when looping through.

I'm working on a real fix, but if you need to work around it in the mean time, using different aliases for each entry type should let you get back proper transforms.

[brandonkelly]

Fixed via #12068 for the next Craft 3 and 4 releases!

[brandonkelly]

Craft 3.7.56 and 4.2.6 are out with that fix.