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

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

Clock Icon2017.11.29

この記事は公開されてから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

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

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

  • いくつかの方法が取れる
    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。非常に楽しいものが作れそうです!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.