LoginSignup
3
2

More than 3 years have passed since last update.

GraphQLのマネージド・サービス AWS AppSyncを軽く触ってみた

Last updated at Posted at 2021-02-27

はじめに

以前、Node.js+MongoDB構成で簡単なGraphQLサーバをつくりました。Schema, Query, Mutationの作成に意外と時間がかかったので、もっと簡単に構築できる方法がないか調べたところ、AWSにAppSyncというサービスがあることを知りました。AppSyncを使うと、Schemaを作成するだけでQueryとMutationの作成やDB接続を簡単にできるということだったので、学習のために触ってみることにしました。

AWS AppSyncとは

AppSyncはGraphQLのマネージド・サービスです。
以下の特徴があり、このサービスを使うと拡張性高くセキュアなリアルタイムアプリケーションを簡単に作ることができます。

  • Schemaを定義するだけでQueryとMutationとSubscriptionを自動作成
  • DBとの自動接続
  • 複数のDBの切り替え
  • データへのセキュアなアクセス
  • オフラインアクセス

*Subscriptionというのは、リアルタイムでデータを取得するために使われるものです。これを使うと、例えばクライアントAがデータ登録を行ったときに、クライアントBの表示がデータ登録後の値にリアルタイムで切り替わります。

Black Beltの資料にもっと詳しい内容が載っています。

API作成手順

AWSマネジメントコンソールでAWS AppSyncを検索し、APIを作成を選択すると以下の画面になります。
APIを作成する方法が6つあるのですが、今回は1からAPI構築する手順を学ぶのが目的なので、ウィザードで作成を選択します。
スクリーンショット 2021-02-27 14.52.51.png
モデルを作成する画面になります。モデルはGraphQLのSchemaにあたるもので、ここで名前やフィールドの設定を行います。モデルテーブルは対応するDBのテーブルにあたります。
スクリーンショット 2021-02-27 15.12.21.png

API名を入力して作成を押します。
スクリーンショット 2021-02-27 15.13.23.png

以下の画面になります。スキーマの画面にMutationとQueryが作成されていることを確認できます。
スクリーンショット 2021-02-27 15.22.27.png

また、データソースをみるとDynamoDBにテーブルが自動で作成されていることも確認できます。
スクリーンショット 2021-02-27 15.27.10.png

試しにクエリからMutation(CreatePracticeAppType)を実行すると、ちゃんとDBにデータが登録されています。
スクリーンショット 2021-02-27 15.31.14.png
スクリーンショット 2021-02-27 15.32.27.png

AWSコンソールにログインしてからここまでなんと3分しか経っていません。すげー。

resolverのカスタマイズ

Muttionを実行できたのでresolverも自動で設定されているわけですが、こちらのカスタマイズも自由に行うことができます。GraphQLリクエストをデータソースの命令に変換する側(リクエストマッピングテンプレート)と、データソースからの応答をGraphQLレスポンスの応答に変換する側(レスポンスマッピングテンプレート)の2つをVTLという言語で好きにカスタマイズすることができます。
スクリーンショット 2021-02-27 16.00.32.png

クライアント(アプリ)との接続

amplifyというサーバレスなバックエンドを簡単に構築するためのJavaScriptライブラリを使うことで、AppSyncで作成したGraphQL APIを自分のアプリと接続することができるようになります。
スクリーンショット 2021-02-27 16.08.07.png

おわりに

今度はAWS Amplifyを使って、APIを含めたバックエンドの構築をやってみたいと思います。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2