この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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
- フェッチポリシーを定義可能
コンフリクトの解決と同期
- いくつかの方法が取れる
- サーバーが勝つ
- サイレントリジェクト
- カスタムロジック（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。非常に楽しいものが作れそうです！