GatsbyJS を Typescript に移行した際の Type 付け

#GatsbyJS #TypeScript #GraphQL

2020-01-09

GatsbyJS で書いているこのブログを Typescript 移行しました。

主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。

Gatsby.js を完全 TypeScript 化する - Qiita

https://qiita.com/Takepepe/items/144209f860fbe4d5e9bb

GraphQL Data, Page Component に型をつける

gatsby-plugin-graphql-codegen を使用する方法と @graphql-codegen/typescript を使用する方法がありましたが前者を選びました。セットアップが簡潔に済んだので。

PageQuery

import { IndexPageQuery } from '../../types/graphql-types.d'

type Props = {
  data: IndexPageQuery
  location: Location
}
const bioQuery = graphql`
  query IndexPage {
`

StaticQuery

import { BioDataQuery } from '../../types/graphql-types.d'

    <StaticQuery
      query={bioQuery}
      render={(data: BioDataQuery) => {

その他 Props

import { SitePageContext } from '../../types/graphql-types.d'

location: Location
pageContext: SitePageContext

感想

TypeScript を入れるとビルド周りで複雑になるフレームワークが多くて不安でしたが、あっさりと移行できてよかったです。

#GatsbyJS #TypeScript #GraphQL

この記事を共有する