GraphQL Code Generatorのススメ!GatsbyJSのTypeScript化

技術


JavaScriptよりTypeScript使ったほうが良いよ、マジで!!!という声に押され、GatsbyJSで作成したブログのTypeScript化を進めています。

現時点、ソースコードの比率はこんな感じ。

中のソース直さなきゃ~とか、gatsby-nodeもTypeScriptで扱えるようにしたい~等はありますが、ほぼTypeScriptになりました。

今回の記事はGatsbyJSでTypeScript化をするときはGraphQL Code Generatorを使うと便利ですよ、というご紹介です。

なにができるの?GraphQL Code Generator

GraphQL Code Generatorでできることをズバリ一言で言い表すならGraphQLで取得した型を自動的に生成してTypeScriptで扱いやすくしてくれます

GraphQL Code Generator

TypeScriptの強みでもあり、めんどくさいな~ポイントでもある使用する型の指定。

GraphQL Code Generatorを使うと、自動で良い感じに生成してくれる。めっちゃ便利。

具体的な使い方ご紹介

GatsbyJSでGraphQL Code Generatorを使うための具体的な方法です。

順を追って見ていきましょう。

1.GraphQL Code Generatorのインストール

まずはGraphQL Code Generatorのインストールです。

下記コマンドを実行(yarn)。

yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

npmの場合は下記コマンドになります。

npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations --save-dev

2.codegen.ymlファイルの作成

インストールが完了したら、プロジェクトフォルダ直下に「codegen.yml」ファイルを作成します。

今回は下記の通り記述します。

overwrite: true
schema: "http://localhost:8000/___graphql"
documents:
  - "./src/**/*.{ts,tsx}"
generates:
  types/graphql-types.ts:
    plugins:
      - typescript
      - typescript-operations
設定項目説明
schemeGraphQLのクエリを指定
documentsタイプ情報を取得したいクエリ記載ソースを指定。例えば上記の例だと、srcフォルダ内の「.ts」「.tsx」ソースに記載されているGraphQLクエリのソース情報を取得する
generatesタイプ情報の出力先
pluginどの言語に合わせたタイプ情報を出力するか

設定項目の詳細は公式のドキュメントにもまとまっています。

3.package.jsonにscriptの記述

ここまで設定すると、graphql-codegenコマンドを実行することで、GraphQLクエリのタイプ情報がcodegen.ymlのgeneratesに指定した出力先に出力されます。

graphql-codegenコマンドを実行するため、package.jsonにscriptを追加します。

※graphql-codegenコマンドは、@graphql-codegen/cliをローカルインストールした場合、手打ちで実行することができません。なのでscriptで実行します。

下記scriptを追加

  "scripts": {
    "gql-codegen": "graphql-codegen --config codegen.yml"
  }

4.GraphQLクエリのタイプを出力する

では、GraphQLクエリのタイプを出力してみましょう。

gatsby developコマンドを実行して、開発用のサーバーを立ち上げます。

サーバーが立ち上がったら、先ほど追加したgql-codegenを実行。

※yarnの場合

yarn gql-codegen

※npmの場合

npm gql-codegen

うまく行けば「types/graphql-types.ts」(generatesの指定先)にタイプ情報がずらーっと出力されます。

5.ソースからクエリのタイプを読む

無事にタイプ情報が出力されたら、ソースからクエリのタイプを読み込んでみましょう。

こんな感じでGraphQLのクエリを指定している場合、

export const pageQuery = graphql`
  query TempPage($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      htmlAst
      frontmatter {
        title
        description
      }
      excerpt
    }
  }
`

TempPageQueryという名前でクエリのタイプ情報が出力されています。クエリ名(TempPage)+Queryです。

graphql-types.ts
export type TempPageQuery = (
  { __typename?: 'Query' }
  & { markdownRemark: Maybe<(
    { __typename?: 'MarkdownRemark' }
    & Pick<MarkdownRemark, 'htmlAst' | 'excerpt'>
    & { frontmatter: Maybe<(
      { __typename?: 'MarkdownRemarkFrontmatter' }
      & Pick<MarkdownRemarkFrontmatter, 'title' | 'description'>
    )> }
  )> }
);

タイプ情報をimportで読み込みます。

import { TempPageQuery } from "../../types/graphql-types"

読み込んだタイプ情報をtype指定で紐付けします。こんな感じです。

type Props = {
  data:TempPageQuery
}

const Page = ({ data }:Props) => {
  ……中略
}
……以下省略
注意点

ソース上に指定しているクエリの名前が重複しているとエラーになるようです。

GraphQL Code Generatorを使用する場合は、重複しないように指定してあげましょう。

まとめ

今回は、GatsbyJSでTypeScript化するならGraphQL Code Generatorを合わせて使うのがおすすめだよ~というお話でした。

いかがでしたでしょうか。

個人的には、GraphQL書いて、タイプ情報も自分で指定して…となると二度手間になってしまうので、自動で生成してくれてとても助かります。

GraphQLの記述を変えた場合もgql-codegenを実行し直すだけです。

TypeScript化をすすめる中で、なぜTypeScriptが良いと言われているのか、なんとなく理解できてきました。まだしっかりと言語化できるまでに至っていないのですが……。

考えがまとまったらTypeScriptそのものについての記事も執筆したいと思っています。

今回はここまで。

sake

現役システムエンジニア。
普段はホスト系のお仕事してます。
ブログでは主にWeb関係の技術について、勉強したことや実際にコーディングしてみた内容を発信していきます。

プロフィール