【レポート】NEW LAUNCH! AWS AppSyncとGraphQLによるリアルタイム＆オフラインアプリケーションの開発 #reinvent #MBL404

MBL404: NEW LAUNCH! Realtime and Offline application development using GraphQL with AppSync

本日発表された新サービス「AWS AppSync」のセッションを聴講したのでレポートします。スピーカーは以下のお二人です。

• Karthik Saligrama
• Rechard Threlkeld

オフラインとリアルタイムのユースケース

• すぐデータが欲しい
  • アラート
  • 新しいストーリー
  • マルチプレイヤーゲーム
  • チャット
• オフラインでもデータが欲しい
  • ファイナンシャルトランザクション
  • 新しい記事
  • ゲーム
  • メッセージング

GraphQLとは

• オープンなデータフェッチング仕様
• != グラフデータベース
• NoSQL、リレーショナル、HTTP、etc. を使える
• 従来のデータフェッチでは、各APIにアクセス
  • /posts
  • /postInfo
  • /postJustTitle
  • /postsByAuthor
  • /postNameStartsWithX
  • /commentsOnPost
• GraphQLでは一発

どうやって動かす？

• モデルデータをアプリケーションのスキーマとともに定義
• クライアントリクエストは必要なだけ
• 必要なデータだけ返却

ベネフィット

• プロトタイプとイテレーションを迅速に行える
• データを必要なだけ取ってくる
• データビヘイビアコントロール
• バンドウィズ最適化（N+1問題など）

GraphQLでは何ができる？

• リアルタイム？YES
• バッチ？YES
• ページネーション？YES
• リレーション？YES
• 集計？YES
• 検索？YES
• オフライン？YES

AppSyncとは？

• GraphQLのマネージドサービス
• オフラインとリアルタイムのプログラミングモデルとともに
• アカウントでリソースに接続
• データをサービスに対して作る、リアルタイムでもオフラインでも
• GraphQLを通してAWSサービスを使える
• 自動同期されるコンフリクトもクラウドで解消
• エンタープライズレベルのセキュリティ機能

どうやって動く？

• スキーマをアップロード
• データソースと接続
• AppSyncでリアルタイムに更新し、オフラインで管理

リアルタイム、オフライン

• Apollo GraphQLとインテグレーション
• オフラインサポート
• コンフリクト解決
• GraphQLの購読
  • イベントドリブンモデル
  • WebSocketコネクションの自動化

オフラインのデータレンダリング

• AWSAppSyncClientをインスタンス化
  • いつものCredentialをセット
  • もちろんCognitoでも
• aws-amplify も利用可能
• WithProviderでProviderを作成（突然のJSXコードが登場）

オフラインの仕組み

• 更新毎にバージョン管理される
• 複数のユーザーが更新したら、マージした内容を新しいバージョンとして保存する
• 各ユーザーのドキュメントは最新に同期される

Optimistic UI

• フェッチポリシーを定義可能

コンフリクトの解決と同期

• いくつかの方法が取れる
  1. サーバーが勝つ
  2. サイレントリジェクト
  3. カスタムロジック（with AWS Lambda）
  • バージョンチェック
  • カスタムチェック
• クライアント側でエラーハンドリングさせることもできる

デモ

Schema & Data type

Schemaの画面。コメントというスキーマを定義している。Webエディターが付いている。

Edit Resolver

マッピングテンプレートはAPI Gatewayに似ています。

Client

Reactで実装した例。

Eventを定義し、どういった項目を扱いたいか、必要なものだけ定義する。

例えばDeleteはIDだけあればいい。

それらを用いてAppClientを実装。

Run

シミュレーターで実行。イベントを更新するアプリ。片方のクライアントの更新が、もう片方にすぐに同期される。

オフラインのデモ。オフラインで作成したデータはローカルで保存され、オンラインになった時に同期される。

Client experience and configuration

• オフライン時は「Store」に書き込み
• SQLiteをプリロード
• オフラインクライアントはコンフィグレーションが可能

画像やリッチコンテンツは？

• S3オブジェクトも扱える
  • バケットやキー、リージョンなどをスキーマに定義する

サブスクライブ

• リアルタイムに近いデータを購読
• イベントベースモード、更新をトリガーに
  • スケーラブルに、一般的なユースケースに合わせてデザイン
• いろんなデータをデータソースにできる
  • Lambda
  • DynamoDB
  • Elasticsearch

スキーマディレクティブ

• サブスクライブする処理だけ購読するように定義

ハンドシェイクプロセス

• サブスクライブすると、WebSocketのコネクションを始める
• セキュアなWebSocketプロトコル wss://

UIのリアルタイム更新

ドローイングアプリのリアルタイム同期のデモ。スキーマに色と座標を定義。

突然のSwift実装。ここはネイティブで実装。API KeyとAppSync URLを指定するだけで接続可能。楽ですね。

最終的にCGPointまで持ってきて描画。可愛らしいイラストが、双方向で同期されます。

ベストプラクティス

• 過剰なことはしない
• オフラインで変更できるようにする
• サブスクリプションは必要な時だけ実施する
• 過度に複雑なコンフリクト解決はやらない

感想

GraphQLの「オフライン」「リアルタイム」を最大限に活かしたAppSync。非常に楽しいものが作れそうです！