Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL Subscription with Relay and Action Cable

E39aeab4407ea02102f75584618549a4?s=47 Hibariya Hi
January 23, 2018

GraphQL Subscription with Relay and Action Cable

E39aeab4407ea02102f75584618549a4?s=128

Hibariya Hi

January 23, 2018
Tweet

Transcript

  1. GraphQL Subscription w/ Relay and Action Cable 2018/01/24 アジャイル事業部 年始のご挨拶

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

    • A member of Idobata development team • A college student (engineering) • https://hibariya.org
  3. Apr 2017: Idobata Public GraphQL API

  4. Idobata Public GraphQL API の課題 リソースの取得や作成はできるが、メッセージの投稿をリアルタイ ムに知らせるようなイベントの配信はサポートしていないため、 GraphQL とは別の独自の仕組み (非公開

    API) を使う必要があ る。
  5. Mar 2017: Subscription が仕様に加わる

  6. 今日お話しすること • GraphQL の Subscription とはどのようなものか • Relay Modern +

    Action Cable で実装するとどんな感じか
  7. GraphQL: A query language for your API • 欲しいものを欲しいだけ、1回のリクエストで取得できる •

    リソースの取得 (Query)、破壊的な操作 (Mutation)、Pub/Sub (Subscription) ができる • スキーマを定義できる • GraphiQL が便利
  8. クエリとレスポンスの例 Request Response

  9. 関連資料

  10. Subscription • GraphQL に Pub/Sub の仕組みが追加された (2017/3) • リアルタイムなアプリケーションの API

    を GraphQL の仕様でカ バーできるようになった • 通信プロトコルには依存しない ◦ WebSocket ◦ MQTT ◦ etc...
  11. 今日使うもの: Relay と Action Cable

  12. Relay • React で GraphQL を使うためのフレームワーク • 各コンポーネントごとに欲しいクエリを書いておくとアプリケー ション全体で1つのクエリにまとめてくれる •

    Relay Modern になって Subscription をサポート • Conventionに従っている限り比較的簡単に開発できる? (個人 の感想)
  13. Relay を使った React Component ひとつの message を描画する React Component

  14. Relay を使った React Component 必要な情報を GraphQL の fragment として書く (HOC)

    l
  15. Relay を使った React Component アプリケーション全体のクエリの一部として投げられる

  16. Action Cable • Rails が提供する WebSocket による Pub/Sub の仕組み •

    アプリケーションプロセスの中で worker が動く • graphql-ruby が Subscription のバックエンドとして Action Cable に対応している • ちょっとした Web アプリで使ってみるにはうってつけ
  17. Subscription Example with Relay and Action Cable

  18. Subscribing New Messages

  19. Server Side • “GraphqlChannel” で Subscription を受け付ける • 扱いたいイベントを定義 •

    Mutation のタイミングでイベントをトリガする
  20. “GraphqlChannel” Subscription に使う Action Cable のチャネル。ここでは主に Subscription の登録を行なう。 詳しくは: graphql-ruby.org/subscriptions/action_cable_implementation

  21. 扱いたいイベントを定義 app/graphql/types/subscription_type.rb

  22. イベントを表現する値の型を定義 app/graphql/types/posted_message_type.rb

  23. イベントを発火する

  24. イベントを発火する app/graphql/mutations/post_message_mutation.rb • トリガする場所は Mutation の中でなくてもいい • “User.all” は適切な scope

    に置き換える
  25. Client Side • 購読したいイベント毎に Subscription クエリを書く • Subscribe 時にイベント発生時の振舞いを指定する •

    Mutation のレスポンスが被るので捨てる (optional)
  26. Client Side

  27. Subscription クエリを書く app/javascript/subscriptions/MessagePostedSubscription.tsx

  28. イベント発生時の振舞いを指定する app/javascript/subscriptions/MessagePostedSubscription.ts

  29. 振舞いの指定 (Mutation と同じ) • edgeName: 新しいリソースが、受け取ったペイロードの何とい うフィールド名で入っているか • type: RANGE_ADD

    はリソースを connection に追加 • connectionInfo: どの connection に追加するか • parentID: connection の親リソースの ID
  30. Subscribe It app/javascript/AppMain.ts

  31. Mutation のレスポンスが被るので無視

  32. Demo • github.com/hibariya/graphql-subscription-examples • Subscription 対応ぶんは PR #1

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

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

  35. Conclusion • GraphQL に Subscriptionが加わったことで、GraphQL の仕様 で作れるアプリケーションの幅が広がった • 実装にはいくつか注意すべきポイントがある •

    デモに使った例はこちら ◦ github.com/hibariya/graphql-subscription-examples