[codegen] Improve DX: generate a [filename].type.ts that contain data type for each [filename].tsx

[d4rekanguok]

Currently, you have to...

• name your query
• mentally add 'Query' suffix to your query name
• import it from '../../graphql-types'
• use it in your IProps or useStaticQuery<MyQuery>

Even though it's a set it & forget it type of thing, it still sucks. I propose we generate a [filename].type.ts next to the [filename] itself, and export the query type right there. So the flow would be more like this:

• import Data (alias for your query data) from [filename].type
• use it

So from this

import * as React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { ImageQuery } from '../../graphql-types'

export const Image = () => {
  const data = useStaticQuery<ImageQuery>(graphql(`...`))
  return (...)
}

To this

import * as React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { Data } from './image.type'

export const Image = () => {
  const data = useStaticQuery<Data>(graphql(`...`))
  return (...)
}

I think this is a better experience. We can infer the file location from Gatsby's generated name for unnamed query. It'll be interesting for dual schema codebase, since I don't know yet how to handle that...

Problems: More loose part, I don't know how reliably we can infer the location / query name, and even if that's stable, the codebase will definitely be more complex complicated.

Any feedback is appreaciated!

[d4rekanguok]

Gatsby ignore files starting with _. Perhaps we can try this & see if it triggers rebuild (likely that it still does...)

Edit: it doesnt.

[d4rekanguok]

partially address in #86