AWS AppSyncでGraphQL【入門編】

Pocket
LINEで送る

aws-sns

お疲れさまです!フクロウラボ若杉です。

1月も、もう終わりですね。この調子で行くと2019年もあっという間な気がしています。。

さて、今回から、AWSのAppSyncについて、書いていきたいと思いますが、その前に、GraphQLについて軽く触れていきたいと思います。

GraphQLとは

GraphQLをあえて3行で言うと、下記のようになりそうです。

  • APIの振る舞いのように取得(Query)、変更(Mutation)、購読(Subscription)を行うことができるクエリ言語
  • 厳密な型指定を使用してクエリを実行できるサーバー側ランタイム
  • データをどのように構造化するかをクライアントが指定でき、取得時には必要なデータのみを必要なフォーマット受け取れる

正直、あまりイメージできないと思いますので、少しずつ説明していきたいと思います。

Web APIの歴史

Web APIの歴史を見てみると、ざっくり下記のような流れがあったと思います。

1998年〜 XML‐RPC

2000年頃〜 SOAP

2005年頃〜 ATOM

2008年頃〜 REST

RPC(Remote Procedure Call)の歴史は長いですが、”エンコード(符号化)にXMLを採用し、転送機構にHTTPを採用”したXML‐RPCが1998年にマイクロソフトによって考案されました。その辺りがWeb APIの歴史が始まっているのではないかと思います。新たな機能を追加して、より体系化されたSOAPもほぼ同時期の2000年くらいから耳にするようになった気がします。

さらに、2005年にATOMが登場します。ブログやニュースのフィードブームに乗って、RSSをATOMフォーマットで配信するというが割とスタンダードな感じになって広まっていったと思います。

その後、REST(Representational State Transfer)が台頭してきます。提唱されたのは2000年らしいですが、TwitterやfacebookなどのSNSがREST APIを公開したあたりから、あらゆるwebサービスのAPIがRESTを採用するようになっていったと思います。作成(POST)、置換(PUT)、更新(PATCH)、削除(DELETE)といったHTTPメソッドにマップされる標準のCRUD操作できるのが大きな特徴です。(実際にCRUDがきちんと実装されているかはさておき)現在でも非常に普及していますね。

そして、ここ数年の新たな潮流として、gRPCGraphQLが出てきました。

gRPCは、RPC回帰的な動きで、.protoファイルを作成することでより簡単にインターフェイスを設計できるようにし、かつ、HTTP/2上をProtocol buffersというシリアライズされたフォーマットでやりとりができるので、パフォーマンスも優れていると思われます。※gRPCについては、別の機会で触れていこうと思います。

今回は、GraphQLについて説明します。

ざっくりRESTful APIとGraphQLの違い

従来データフェッチとGraphQLの違い

AWS re:Invent 2017: NEW LAUNCH! Realtime and Offline application development using G (MBL404)より参照

まず、GraphQLの特徴として、エンドポイントが1つになるというのがあります。

従来のRESTful APIでは、あらゆるデータをフェッチする際に、ほとんどの場合、複数のエンドポイントに対してリクエストを投げるようになっています。

対してGraphQLでは、エンドポイントは1つのみで、あらゆるデータを返すことができます。その詳細は後ほど説明しますので、ここでは触れませんが、それによって、非常にクリーンなインターフェイスが実現できます。また、RESTful APIではAPIをユーザーに理解してもらうためにドキュメントが必須で作成に時間を費やしていましたが、GraphQLではドキュメント作成に時間を費やす必要もなくなります。また、ユーザー側も複雑なドキュメントを理解するための労力もかなり軽減されます。

AWS AppSyncとは

GraphQLをすぐに利用できるフルマネージドサービスです。自前でGraphQLを構築するのは手間がかかりますがAppSyncを使えば簡単に構築できますよ、さらにDynamoDBやLambdaとのアクセスもシームレスに行えるので非常に便利ですよ、ということです。

他のAppSyncのメリットとしては、

  • リアルタイムのデータアクセスと更新:Amplifyというクライアント用ライブラリが用意されているのですが、それとの併用でWebsocketを使ったSubscriptionハンドシェイクをまるっと実装でき、データ更新をクライアントに対して即時反映できる。
  • オフラインデータ同期:先のAmplifyでオフライン時のデータキャッシュ管理が提供されている。
  • アプリケーション内でのデータのクエリ、フィルタリング、検索:サーバー側とクライアント側両方でのフィルタリングが可能。
  • エンタープライズセキュリティときめ細かなアクセスコントロール:IAMベースでアクセスコントロールができる。

などが挙げられます。

とりあえず、使ってみる

文字で説明されてもいまいち分かりづらいと思いますので、一見は百聞にしかずということで、まずは、Hello world的なやってみたいと思います。

左ナビの上の”AWS AppSync”をクリックします。

スクリーンショット 2019-01-31 14.25.13

“Create API”で新たなAPIを作成します。

“Step 1 Getting Started”に移行します。

スクリーンショット 2019-01-31 13.44.38

上方の”Customize your API or import from Amazon DynamoDB”の”start”ボタンをそのままクリックします。

“Step2 Create a model”へ移行します。

スクリーンショット 2019-01-31 13.45.52

“Name the model”の”Model Name”の入力では、”HelloWorld”と入れました。

“Configure model fields”では、作成するmodelにどのようなfieldを持たせるかを設定できます。今は動作確認のみが目的なので、そのまま”create”ボタンをクリックして、”Step3 resources”へ進みます。

スクリーンショット 2019-01-31 13.46.21

“API name”を決めます。今回は、”HelloWorld App”としました。

“create”ボタンをクリックします。

スクリーンショット 2019-01-31 13.46.30

この状態で、何秒か待っていると作成が完了して、”Queries”の画面へ遷移します。

スクリーンショット 2019-01-31 13.46.45

ここで一旦、DynamoDBの方の画面を覗きに行ってみましょう。

スクリーンショット 2019-01-31 13.47.48

すると、”HelloWorldTable”というtableが作成されているはずです。

再度、AppSyncの画面へ戻ります。”HelloWorld App”の”Queries”の画面の再生ボタンをクリックします。

スクリーンショット 2019-01-31 13.49.09

“createHelloWorld”と”listHellWorlds”というメソッドが作成されているのがわかると思います。

スクリーンショット 2019-01-31 13.49.33

そこで、”createHelloWorld”をクリックして実行してみましょう。

下方の”QUERY VALIABLES”の内容で”createHelloWorld”メソッドを実行することになります。

スクリーンショット 2019-01-31 13.49.45

実行結果が右側に表示されます。

これでレコードが1つ挿入されたことになります。

続けて、”listHelloWorlds”メソッドを実行してみましょう。

スクリーンショット 2019-01-31 13.50.14

右側に結果が表示されています。

スクリーンショット 2019-01-31 14.53.35

右ナビの”Data Source”をクリックすると先程、DynamoDBの画面で作成されていたtableが表示されています。

スクリーンショット 2019-01-31 13.55.27

実際に、レコード(Items)をみてみると、”title”が”Hello,world!”というレコードが挿入されているのがわかると思います。

スクリーンショット 2019-01-31 13.55.36

 

また、左ナビの”Schema”を選択すると、defaultで生成されたSchema構成を見ることができます。

スクリーンショット 2019-01-31 13.56.57

 

最後に、左ナビの”Settings”を選択することで、エンドポイントや認証情報を確認することができます。

スクリーンショット 2019-01-31 13.57.20

 

 

とりあえず、駆け足でAppSync内で、”Hell,world!”とレコードを挿入して、取得するところまで行いました。

今回は、”とりあえずAppSyncを使ってみる”という感じでしたが、次回、Amplifyを使ったクライアントの実装や、Subscriptionを使ったリアルタイムな更新反映などを行ってみたいと思います。

Pocket
LINEで送る