TypesciprtでGraphQL Code Generator を試す

概要

仕事で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を実行すると自動生成されずはずだがされない、、