もともとGatsbyのReact関連実装がJavaScriptだったので、TypeScriptで実装し直した。

必要なライブラリのインストール。

$ yarn add gatsby-plugin-typegen
$ yarn add -D typescript

tsconfig.jsonを生成する。

$ npx tsc --init

gatsby-plugin-typegenを入れておくと、yarn buildしたときにGraphQLのクエリに対応した型を自動的に作成してくれる。
これを利用するためにはクエリに名前をつけておく必要がある。

# 名前をつけていく
query Hoge {
}

あとはyarn buildすると対応した型のファイルが作成されるので、これを利用して実装を書き換える。
基本的にはxxx.js -> xxx.tsxで書き直していく。

型が導入されるのでエラーが出るが、Componentに対して適した型を渡していけば対応できる。
ただし、自動生成された型は値が取得できなかった場合を考慮してundefinedを許容するようになっており、値を取得する際もそれに合わせた対応が必要になる。
?を書くことになるがちょっと気持ち悪いのでどこかで対応したい。

const Component: React.FC<PageProps<GatsbyTypes.HogeQuery>> = ({...}) => {
  ...
}

参考

• Gatsby.jsのTypeScript化 2020