amplify codegenの参照先スキーマにAppSyncのGraphQLのIDを指定する方法🚀

amplify codegenの参照先スキーマにAppSyncのGraphQLのIDを指定する方法🚀

こんにちは!

最近はGraphQL開発が増え、AWS Amplifyが注目されるようになってきました。変更がしやすくデータアクセス志向なAPI設計を提供してくれるGraphQLは、まさに現代のリーンスタートアップ的なプロジェクトにはぴったりな技術ですよね。

AmplifyをGraphQLのクライアントとして利用する場合に、各種GraphQLコード(Query, Mutation, Subscription)をどのように管理するのか悩みどころだと思います。

本記事では、 Amplify codegenをデプロイ済みのAppSyncのスキーマと連携させる方法を紹介します!

想定する読者

  • AmplifyとCloudFormation構築したAppSyncの連携方法に悩んでいるヒト
  • プロジェクトへAmplifyの採用を検討しているヒト

はじめに

AppSync構築にはAmplify CLIを使った方が良いのか?

まず、GraphQLのエンドポイント(AppSync)の構築方法は2パターンあります。

  • Amplify CLIでschema.graphqlファイルから自動的にAppSyncを構築
  • Cloud Formation自動構築または管理コンソール上でAppSyncを手動構築

わたし達がAppSyncを構築する際は、基本的にAmplify CLI利用せず、Cloud Formationを個別で作成し対応しています。

これは、Amplify CLIにはまだまだ不具合が多く、過去にAmplifyで構築したシステムの運用で苦しんだ経験があるためです。(GSIを後から追加できない、ElasticSearchを後から追加できないなど)

Cloud Formationで構築したAppSyncとAmplify codegenを連携させる方法

amplify add codegen --apiId {appsync_graphql_id}
amplify codegen

上記のコマンドを実行すると、ローカル環境へQuery, Mutation, Subscriptionが生成されます。

自動連携させない方法もあります

本記事のテーマからは外れますが、プロジェクトのルートディレクトリにschema.graphqlファイルを設置することで、amplify codegenがスキーマファイルの内容を基準に各種GraphQLファイルをビルドしてくれます。

AppSyncコンソールから都度スキーマファイルをダウンロードしローカルに落とせば、手動でのスキーマファイルの管理も可能です。

まとめ

Amplifyには不具合がまだまだ多く、実運用には慎重にならなければいけませんが、わたし達はAmplifyフレームワークの思想が好きです。

インフラのコードを一切書かない、可能な限りインフラを意識させない、これはプロジェクト全体の開発コストを大幅に下げることができると思います。Amplifyの将来にが楽しみですね。