🍎

TypesciprtでGraphQL Code Generator を試す

2022/08/01に公開
1

概要

仕事でgraphql code generator(以下codegen)を使用するので色々と試していく。
リポジトリは以下。
https://github.com/masaya0521/ts-graphql-codegen

こちらを参考させて頂く。
https://techlife.cookpad.com/entry/2021/03/24/123214

環境

  • macOS Monterey ver 12.2.1
  • yarn ver 1.22.19
  • nuxt ver 2.15.8

codegenのインストール

yarnで追加する。codegenはtypescript専用のライブラリではなく、様々な言語に対応しており、自分の用途にあったライブラリを組み合わせていかないといけない。
今回はとりあえず@graphql-codegen/typescript@graphql-codegen/typescript-operations@graphql-codegen/typescript-graphql-requestを追加してみる。必要になったら都度他ライブラリを追加する。

yarn add @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-graphql-request

codegenの設定

codegen.ymlに設定を書いていく。

schema: schema.graphql
documents: graphql/*.graphql
generates:
  lib/generated/client.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request

ルートディレクトリにスキーマを書く。

type Recipe {
  id: Int!
  title: String!
  imageUrl: String
}

type Query {
  recipe(id: Int!): Recipe!
}

graphql配下に発行するクエリを書く。

type Recipe {
  id: Int!
  title: String!
  imageUrl: String
}

type Query {
  recipe(id: Int!): Recipe!
}

これでnpx graphql-codegenを実行すると自動生成されずはずだがされない、、

Discussion

しゃもじしゃもじ

自動生成できなかった原因

  • 諸々の設定忘れ
    そもそもcodegen.yml@graphql-codegen/cliで作れるっぽい。あとはgraphqlを追加していなかった。
    つまり、Typescriptのcodegenライブラリを追加する前に
yarn add @apollo/client graphql
yarn add -D @graphql-codegen/cli @graphql-codegen/typescript

で追加して

yarn graphql-codegen init

codegen.ymlの自動生成をしなければならなかった

ログインするとコメントできます