もともと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>> = ({...}) => {
...
}