$30 off During Our Annual Pro Sale. View Details »

GraphQL Subscription with Relay and Action Cable

Hibariya Hi
January 23, 2018

GraphQL Subscription with Relay and Action Cable

Hibariya Hi

January 23, 2018
Tweet

More Decks by Hibariya Hi

Other Decks in Technology

Transcript

  1. こんにちは • Gentaro Terada (@hibariya) • Works at ESM, Inc.

    • A member of Idobata development team • A college student (engineering) • https://hibariya.org
  2. GraphQL: A query language for your API • 欲しいものを欲しいだけ、1回のリクエストで取得できる •

    リソースの取得 (Query)、破壊的な操作 (Mutation)、Pub/Sub (Subscription) ができる • スキーマを定義できる • GraphiQL が便利
  3. Subscription • GraphQL に Pub/Sub の仕組みが追加された (2017/3) • リアルタイムなアプリケーションの API

    を GraphQL の仕様でカ バーできるようになった • 通信プロトコルには依存しない ◦ WebSocket ◦ MQTT ◦ etc...
  4. Relay • React で GraphQL を使うためのフレームワーク • 各コンポーネントごとに欲しいクエリを書いておくとアプリケー ション全体で1つのクエリにまとめてくれる •

    Relay Modern になって Subscription をサポート • Conventionに従っている限り比較的簡単に開発できる? (個人 の感想)
  5. Action Cable • Rails が提供する WebSocket による Pub/Sub の仕組み •

    アプリケーションプロセスの中で worker が動く • graphql-ruby が Subscription のバックエンドとして Action Cable に対応している • ちょっとした Web アプリで使ってみるにはうってつけ
  6. 振舞いの指定 (Mutation と同じ) • edgeName: 新しいリソースが、受け取ったペイロードの何とい うフィールド名で入っているか • type: RANGE_ADD

    はリソースを connection に追加 • connectionInfo: どの connection に追加するか • parentID: connection の親リソースの ID
  7. 実用を踏まえた課題/検討事項 • Action Cable 単体では対応が難しい問題をどうするか ◦ 不意の切断から再接続までのメッセージ取りこぼし ◦ パフォーマンス? •

    イベント発生時の GraphQL クエリをどこで実行するか ◦ Subscription の数 x イベントの数 = たくさん ◦ バックグラウンドジョブに移すのがベター • クライアント側は Action Cable に対応する必要がある