gatsbyImageData property is typed as any

[smashercosmo]

Describe the bug
Gatsby has recently introduced new image plugin. In order to use it, you have to query for 'gatsbyImageData', like this

  query Query {
    albumsJson {
      coverImage {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  }

for some reason in types generated by graphql-code-generator gatsbyImageData property is typed like this

export type ImageSharp = Node & {
  ...
  readonly gatsbyImageData: Scalars['JSON'];
  ...
}

which results in gatsbyImageData being of type 'any'. Though in graphql schema this property is typed like this
https://github.com/gatsbyjs/gatsby/blob/57c131db9d43e526e6228df4502119b8296ebfb6/packages/gatsby-transformer-sharp/src/customize-schema.js#L568
https://github.com/gatsbyjs/gatsby/blob/57c131db9d43e526e6228df4502119b8296ebfb6/packages/gatsby-transformer-sharp/src/customize-schema.js#L403

I'm not sure, if it's a bug or I'm doing something wrong.

To Reproduce
If it's not something obvious, I'll provide example repo. But basically it can be reproduced with any new gatsby project.

My codegen.yml config file:

overwrite: true
schema: "http://localhost:8000/___graphql"
documents:
  - ./src/**/*.{ts,tsx}
  - ./node_modules/gatsby-transformer-remark/!(node_modules)/**/*.js
  - ./node_modules/gatsby-transformer-sharp/!(node_modules)/**/*.js
  - ./node_modules/gatsby-transformer-yaml/!(node_modules)/**/*.js
  - ./node_modules/gatsby-transformer-json/!(node_modules)/**/*.js
generates:
  ./src/types/generated/graphql.ts:
    hooks:
      afterOneFileWrite:
        - prettier --write
    plugins:
      - typescript
      - typescript-operations
config:
  # https://github.com/dotansimha/graphql-code-generator/issues/642#issuecomment-495919863
  namingConvention:
    enumValues: keep
  avoidOptionals: true
  immutableTypes: true
  # https://github.com/dotansimha/graphql-code-generator/issues/2051#issuecomment-504762976
  maybeValue: T

Environment:

{
  "@graphql-codegen/cli": "1.21.3",
  "@graphql-codegen/introspection": "1.18.1",
  "@graphql-codegen/typescript": "1.21.1",
  "@graphql-codegen/typescript-operations": "1.17.15",
}

[ardatan]

Custom scalars(other than primitive default ones) are typed as any in GraphQL Codegen. It seems that field is typed as JSON for some reason. Could you check the type of that field from the URL http://localhost:8000/___graphql ?

[smashercosmo]

Hm... yeah, seems like it's a problem with gatsby

But maybe it's possible somehow to make graphql-code-generator to use gatsby's own type for this specific field? https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx#L47

[ardatan]

You can use scalars configuration field to map a scalar type to a TypeScript type;

scalars:
  JSON: my-types.ts#MyType

But it is not possible to do this for a specific type for now.

[smashercosmo]

Maybe it's possible to do via custom plugin?

[smashercosmo]

Ok, figured out how to solve it. First of all we need to change return type for gatsbyImageData function in graphql:

gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    scalar GatsbyImageData

    type ImageSharp {
      gatsbyImageData(
        aspectRatio: Float
        avifOptions: AVIFOptions
        backgroundColor: String
        blurredOptions: BlurredOptions
        breakpoints: [Int]
        formats: [ImageFormat]
        height: Int
        jpgOptions: JPGOptions
        layout: ImageLayout = CONSTRAINED
        outputPixelDensities: [Float]
        placeholder: ImagePlaceholder
        pngOptions: PNGOptions
        quality: Int
        sizes: String
        tracedSVGOptions: Potrace
        transformOptions: TransformOptions
        webpOptions: WebPOptions
        width: Int
      ): GatsbyImageData!
    }
  `
  createTypes(typeDefs)
}

And then in in codegen.yml

config:
  scalars:
    GatsbyImageData: gatsby-plugin-image#IGatsbyImageData

[smashercosmo]

@ardatan thx for the help

[mmclafferty]

@smashercosmo I am trying to do this same thing but am running into errors with Type with name 'AVIFOptions' does not exist. Do run into this?

[smashercosmo]

no, sorry, I haven't. this solution still works for me even with latest Gatsby 3.3.

[LekoArts]

With gatsbyjs/gatsby#35683 the return type should become a custom scalar, not JSON