Bug found when trying to generate two versions of the same image in a graphql query

[mrbjjackson]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

This is a bug I found while trying to produce two versions of the same image from a graphql repo. I used two graphql aliases to return the same image with different settings for transformOptions: {duotone }.

I found that if all parameters in the graphql query are the same, except for the transformOptions: { duotone } settings, two different images are not generated. Rather the same image is displayed twice.

In my case, I was able to bypass this bug by adding different quality settings to each of the query parameters. If I add quality settings to each image query, then the different images display correctly. I have commented out some alternative graphql queries in the index.js that demonstrate this fix.

Reproduction Link

https://github.com/mrbjjackson/gatsby-plugin-image-transformOptions-bug

Steps to Reproduce

1. Install the gatsby project and run it.
2. Navigate to "/"

Expected Result

Two images with different duotone settings to be displayed.

Actual Result

The same image is displayed twice.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 97.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^4.9.0 => 4.9.0 
    gatsby-plugin-image: ^2.9.0 => 2.9.0 
    gatsby-plugin-manifest: ^4.9.0 => 4.9.0 
    gatsby-plugin-react-helmet: ^5.9.0 => 5.9.0 
    gatsby-plugin-sass: ^5.9.0 => 5.9.0 
    gatsby-plugin-sharp: ^4.9.0 => 4.9.0 
    gatsby-plugin-sitemap: ^5.9.0 => 5.9.0 
    gatsby-source-filesystem: ^4.9.0 => 4.9.0 
    gatsby-transformer-sharp: ^4.9.0 => 4.9.0 
  npmGlobalPackages:
    gatsby-cli: 4.6.1

Config Flags

No response

[LekoArts]

Hi, thanks for the issue!

I simplified your reproduction to this and can also reproduce this:

import * as React from "react";
import { graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

// markup
const IndexPage = ({ data }) => {
   return (
      <main>
         <h1>Hello</h1>
         <GatsbyImage image={getImage(data.duotone1.childImageSharp)} />
         <GatsbyImage image={getImage(data.duotone2.childImageSharp)} />
      </main>
   );
};

export default IndexPage;

export const pageQuery = graphql`
   query MyQuery {
      duotone1: file(name: {eq: "test"}) {
         childImageSharp {
            gatsbyImageData(
               width: 500
               transformOptions: {
                  duotone: { highlight: "#BBFFE6", shadow: "#51758D" }
               }
            )
         }
      }
      duotone2: file(name: {eq: "test"}) {
         childImageSharp {
            gatsbyImageData(
               width: 500
               transformOptions: {
                  duotone: { highlight: "#F1D283", shadow: "#000000" }
               }
            )
         }
      }
   }
`

When you look at the generated <picture> element its the same image, we don't respect the diff transformOptions. I'll look into it :)