GraphQL Subscription with Relay and Action Cable

Introducing GraphQL Subscription with Relay and graphql-ruby (use Action Cable as the backend).

See Also:

* http://facebook.github.io/graphql/draft/
* http://graphql-ruby.org/subscriptions/overview.html
* https://facebook.github.io/relay/docs/en/subscriptions.html
* https://speakerdeck.com/hibariya/building-a-web-api-with-graphql
* https://blog.ably.io/rails-5-actioncable-the-good-and-bad-parts-1b56c3b31404
* https://github.com/hibariya/graphql-subscription-examples/

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