Replace generic GraphQLJSON custom scalar with specific ones

[aaronadamsCA]

I think the generic custom GraphQL JSON scalar type (GraphQLJSON in JS) should be replaced with more specific custom scalar types that correspond to the actual JSON data being returned by the field.

We're using GraphQL Code Generator and it's really helping our Gatsby development speed. Unfortunately there's a big gap: the Gatsby graph often uses the very generic scalar type JSON to represent different JSON data structures.

Example:

gatsby/packages/gatsby-source-contentful/src/extend-node-type.js

Line 908 in 325fdf4

fieldConfig.type = GraphQLJSON

To map this to a TypeScript type, we could configure graphql-codegen to map GraphQL scalar type JSON to TypeScript type IGatsbyImageData. But now if we need to consume JSON data elsewhere in the graph we've got a problem.

Compare to the Shopify graph, which defines custom Money and URL scalar types. Any field with either type still "just" returns a string, but the content of that string is guaranteed to be a decimal number or valid URL. This is the right way to do custom scalar types.

We can work around this for now with type casting:

file?.childImageSharp?.gatsbyImageData != null &&
  <GatsbyImage image={file.childImageSharp.gatsbyImageData as IGatsbyImageData} />

But this sucks to repeat every time, and opens us up to the very kinds of mistakes we're working to prevent in the first place.

[aaronadamsCA]

Here's our current GraphQL Code Generator configuration, which (among other things) maps GraphQL scalar type JSON to TypeScript type IGatsbyImageData:

codegen.yml

overwrite: true
schema: http://localhost:8000/___graphql
documents:
  - ./src/**/*.{js,jsx,ts,tsx}
  - ../../node_modules/gatsby-source-*/!(node_modules)/**/*.js
  - ../../node_modules/gatsby-transformer-*/!(node_modules)/**/*.js
generates:
  src/types/gatsby.generated.d.ts:
    plugins:
      - typescript
      - typescript-operations
    config:
      arrayInputCoercion: false
      defaultScalarType: unknown
      enumsAsTypes: true
      immutableTypes: true
      onlyOperationTypes: true
      scalars:
        JSON: import('gatsby-plugin-image').IGatsbyImageData

I think it would be better if we could map a new scalar type GatsbyImageDataJSON to type IGatsbyImageData, and so on.

[aaronadamsCA]

This has been delivered.