graphqlTypegen generating wrong Type definitions for gatsby-plugin-image + gatsby-source-contentful

[Mike-Logit]

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

TL;DR The TypeScript generated by Gatsby using the graphqlTypegen setting defined in gatsby-config.ts is wrong.

I'm using the following package versions to query gatsbyImageData from Contentful using TypeScript:

  "dependencies": {
    "gatsby": "^4.19.2",
    "gatsby-plugin-image": "^2.19.0",
    "gatsby-plugin-sharp": "^4.19.0",
    "gatsby-source-contentful": "^7.17.0",
    "gatsby-transformer-sharp": "^4.19.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.45",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "typescript": "^4.7.4"
  }

I'm also using graphqlTypegen declared in gatsby-config.ts to generate types for my Contentful assets to add TypeScript support.

I query images from Contentful using the following example query (by following the migration guide and the relevant plugin documentation):

  const { allContentfulProduct } = useStaticQuery<Queries.Query>(graphql`
    query {
      allContentfulProduct(limit: 1) {
        nodes {
          image {
            gatsbyImageData(height: 260, width: 380, layout: CONSTRAINED)
          }
        }
      }
    }
  `);

The problem is that the following use of the GatsbyImage component does not work with this product image I queried for, despite the gatsbyImage value being the correct TypeScript type being supplied for the image property:

<GatsbyImage
  alt="gatsbyImage"
  image={productImageAsset.gatsbyImage}
/>

And using the gatsbyImageData property available to me works but is not the correct TypeScript type:

<GatsbyImage
  alt="gatsbyImageData"
  image={productImageAsset.gatsbyImageData} // I'm seeing an error reported here but the image shows as expected
/>

The generated TypeScript looks like this:

type ContentfulAsset = ContentfulReference & Node & RemoteFile & {
  // omitted other properties for brevity...

  /** Data used in the <GatsbyImage /> component. See https://gatsby.dev/img for more info. */
  readonly gatsbyImage: Maybe<Scalars['GatsbyImageData']>;
  readonly gatsbyImageData: Maybe<Scalars['JSON']>;

 // omitted other properties for brevity...
}

And the typing definition for the "image" property used by the GatsbyImage component looks like this:

export interface GatsbyImageProps extends ... {
     // omitted other properties for brevity...

    image: IGatsbyImageData;
  
     // omitted other properties for brevity...
}

So, TypeScript is telling me to use "gatsbyImage" (which results in no image being displayed) instead of "gatsbyImageData" (which shows my image and the plugin works as expected):

So I believe the TypeScript being generated is wrong for this scenario as I have to ignore the typing errors for it to work.

Reproduction Link

https://codesandbox.io/s/vigilant-golick-ekfgim?file=/src/pages/index.tsx

Steps to Reproduce

1. Open the CodeSandbox link or VSCode
2. Install dependencies from package.json using npm i if using VSCode. CodeSandbox should do this automatically.
3. If using VSCode, run gatsby develop
4. You should see an error with a red squiggly line below image={productImageAsset.gatsbyImageData} despite it working correctly due to a typing issue from the generated TypeScript.

Expected Result

The generated TypeScript should be correct so that you can pass gatsbyImageData in the ContentfulAsset to the GatsbyImage component without a TypeScript error due to the wrong types being generated.

Actual Result

You need to use gatsbyImageData for the image to show even though it is not of type IGatsbyImageData and the GatsbyImage component expects a type of IGatsbyImageData passed to the image property, so this is wrong:

type ContentfulAsset = ContentfulReference & Node & RemoteFile & {
  // omitted other properties for brevity...

  /** Data used in the <GatsbyImage /> component. See https://gatsby.dev/img for more info. */
  readonly gatsbyImage: Maybe<Scalars['GatsbyImageData']>; // DOES NOT WORK
  readonly gatsbyImageData: Maybe<Scalars['JSON']>; // WORKS!! But not of type IGatsbyImageData...

 // omitted other properties for brevity...
}

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.13
  Browsers:
    Edge: 44.19041.1266.0
  npmPackages:
    gatsby: ^4.19.2 => 4.19.2 
    gatsby-plugin-image: ^2.19.0 => 2.19.0 
    gatsby-plugin-sharp: ^4.19.0 => 4.19.0 
    gatsby-source-contentful: ^7.17.0 => 7.17.0 
    gatsby-transformer-sharp: ^4.19.0 => 4.19.0

Config Flags

No response

[Mike-Logit]

Or am I supposed to query for gatsbyImage like this?:

EDIT: No, after some experimenting, querying for the gatsbyImage field and passing its returned value to the GatsbyImage component resulted in only some of the images loading and others failing, but the gatsbyImageData field loads all of the images correctly.

const { allContentfulProduct } = useStaticQuery<Queries.Query>(graphql`
  query {
    allContentfulProduct(limit: 1) {
      nodes {
        image {
          gatsbyImage(height: 260, width: 380, layout: CONSTRAINED)
        }
      }
    }
  }
`);

If I change my graphql query to using gatsbyImage instead of gatsbyImageData then the Typing errors disappear when used with the GatsbyImage component so I'm confused as the below documentation says to use gatsbyImageData:

• gatsby-source-contentful documentation (see this link)

• gatsby-plugin-image documentation (see this link).

[Mike-Logit]

When I viewed the gatsby production build on our test server the images were frequently failing to load. I changed both the graphql query and value used on the GatsbyImage component to use the gatsbyImageData field and now the images work as expected, so the Typescript type is wrong as the bug report previously suggested.

[LekoArts]

Hi, thanks for the issue!

gatsbyImage is only needed for Image CDN: https://www.gatsbyjs.com/blog/image-cdn-lightning-fast-image-processing-for-gatsby-cloud/. So for this issue it's not relevant as you'll want to use gatsbyImageData.

So the gatsbyImageData field from ContentfulAsset is defined here:

gatsby/packages/gatsby-source-contentful/src/create-schema-customization.js

Line 125 in 0ee492c

gatsbyImageData: getGatsbyImageFieldConfig(

It uses getGatsbyImageFieldConfig from here:

gatsby/packages/gatsby-plugin-image/src/resolver-utils.ts

Lines 157 to 170 in 0ee492c

	export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
	resolve: GraphQLFieldResolver<
	TSource,
	TContext,
	IGatsbyImageFieldArgs & TArgs
	>,
	extraArgs?: ObjectTypeComposerArgumentConfigMapDefinition<TArgs>
	): ObjectTypeComposerFieldConfigAsObjectDefinition<
	TSource,
	TContext,
	IGatsbyImageFieldArgs & TArgs
	> {
	return {
	type: hasFeature(`graphql-typegen`) ? `GatsbyImageData!` : `JSON!`,

As you can see, it should not return JSON but GatsbyImageData! as a Scalar type:

type: hasFeature(`graphql-typegen`) ? `GatsbyImageData!` : `JSON!`,

I'll grab your codesandbox and see if I can figure out what it is.

[LekoArts]

Found the problem & fix: #36337

[Mike-Logit]

As you can see, it should not return JSON but GatsbyImageData! as a Scalar type

@LekoArts This sounds exactly like what's been happening and I'm glad my issue made sense. Thank you for the fix and for the great explanation! I temporarily had to tell TypeScript it was of type GatsbyImageData using const data = image as unknown as GatsbyImageData so I can remove this now and rely on graphql-typegen once again.

Feel free to close this issue either now or when the PR gets merged 👍