Chapter 04

Graphql codegenの環境をセットアップする

Eringi_V3
Eringi_V3
2021.09.08に更新

静的型付け言語でGraphQLを使う最大のメリットと言えば型の自動生成です。
このチャプターではyarn codegenでGraphQLスキーマにもとづいたTypeScriptの型が自動生成される環境をセットアップしていきます。

必要な依存をインストールします。

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

package.jsonのscriptsに以下を追加。

"codegen": "graphql-codegen --config codegen.yml"

codegenに必要なので、後々使うApolloのContextに詰め込むUserの型定義を用意します。

src/types/context.d.ts
export type Context = {
  user?: {
    name: string;
    email: string;
    token: string;
  };
};

次にcodegen.ymlを用意します。
src/types/generated/graphql.tsというファイルに生成された型が書き出されるように設定します。

codegen.yml
overwrite: true
generates:
  ./src/types/generated/graphql.ts:
    schema: schema.graphql
    config:
      useIndexSignature: true
      # リゾルバーのためのContextの型をsrc/types/context.d.tsから読み込む
      contextType: ../context#Context
    plugins:
      - typescript
      - typescript-resolvers

ここまでできたら、

yarn codegen

src/types/generated/graphql.tsに型が生成されます。

このチャプター完了時のソースコード

https://github.com/EringiV3/apollo-server-prisma-todo-app/tree/e3aa0821e3016ffc6bebaae25ed72ae98b4bf154