メモです。
最近、GraphQLを使い始めた。AWSのAppSyncを使っている。
GraphQLではスキーマの情報をschema.graphqlとかschema.jsonとかってファイルで定義する。AppSyncをマネージメントコンソール上でポチポチと作った場合もこのファイルがダウンロードできる。
さて、実際にGraphQLを使ったアプリはTypeScriptで書いている。TypeScriptと言えば型だ。というわけでGraphQLのスキーマ情報からTypeScriptの型を生成したいんだけどAWSのガイドとかだとこのあたりAmplifyを使ったガイドしかない。そしてAmplifyはいろんな理由でできれば使いたくない。
実際にGraphQLへのクエリとかもAmplifyは使っていない。なのに型情報の生成のためだけにAmplify使うの嫌だなーと思ってTwitterでブツブツ言ってたらこんなのがあるって教えてもらった。
www.graphql-code-generator.com
これは良さげ。ということで早速入れてみる。
インストール。
yarn add -D @graphql-codegen/cli yarn add -D @graphql-codegen/typescript-operations @graphql-codegen/typescript
初期化
yarn graphql-codegen init
いろいろ聞かれるが正直なところ何を選択すればいいかよくわからない。
実行するとcodegen.ymlが生成される。最後のpackage.jsonにどういう感じで追加するかについてはgenerateを指定した。
自分の場合、こんな感じでできあがった。
overwrite: true
schema: 'schema.graphql'
generates:
src/generated/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'
生成する
yarn generate
実行したらUnknown type: "AWSJSON".と出てしまった。確かにAppSync使ってることもありいくつかのフィールドをAWSJSONという型を指定している。さらに言えばAWSTimestampも使っている。
というわけでこれらをどう扱うか教えてあげる必要がある。
AppSyncの型に対応する
以下のファイルをappsync.graphqlとでも名前をつけて作成する。
scalar AWSDate scalar AWSTime scalar AWSDateTime scalar AWSTimestamp scalar AWSEmail scalar AWSJSON scalar AWSURL scalar AWSPhone scalar AWSIPAddress
そしてcodegen.ymlを編集してschemaファイルとして作成したファイルも見るようにする。
schema: - schema.graphql - appsync.graphql
再度 yarn generateを実行する。
めでたく指定したファイル（ここでは src/generated/graphql.ts）に型の情報が出力された。
あとはこれをインポートして利用するだけだ。
