AWS AppSyncのスキーマ情報からAmplify以外の方法でTypeScriptの型を生成する

メモです。

最近、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)に型の情報が出力された。

あとはこれをインポートして利用するだけだ。

©Keisuke Nishitani, 2020   プライバシーポリシー