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 アジャイル事業部 年始のご挨拶
   

   View Slide

2. こんにちは
   ● Gentaro Terada (@hibariya)
   ● Works at ESM, Inc.
   ● A member of Idobata development team
   ● A college student (engineering)
   ● https://hibariya.org
   

   View Slide

3. Apr 2017: Idobata Public GraphQL API
   

   View Slide

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

   View Slide

5. Mar 2017: Subscription が仕様に加わる
   

   View Slide

6. 今日お話しすること
   ● GraphQL の Subscription とはどのようなものか
   ● Relay Modern + Action Cable で実装するとどんな感じか
   

   View Slide

7. GraphQL: A query language for your API
   ● 欲しいものを欲しいだけ、1回のリクエストで取得できる
   ● リソースの取得 (Query)、破壊的な操作 (Mutation)、Pub/Sub
   (Subscription) ができる
   ● スキーマを定義できる
   ● GraphiQL が便利
   

   View Slide

8. クエリとレスポンスの例
   Request Response
   

   View Slide

9. 関連資料
   

   View Slide

10. Subscription
    ● GraphQL に Pub/Sub の仕組みが追加された (2017/3)
    ● リアルタイムなアプリケーションの API を GraphQL の仕様でカ
    バーできるようになった
    ● 通信プロトコルには依存しない
    ○ WebSocket
    ○ MQTT
    ○ etc...
    

    View Slide

11. 今日使うもの: Relay と Action Cable
    

    View Slide

12. Relay
    ● React で GraphQL を使うためのフレームワーク
    ● 各コンポーネントごとに欲しいクエリを書いておくとアプリケー
    ション全体で1つのクエリにまとめてくれる
    ● Relay Modern になって Subscription をサポート
    ● Conventionに従っている限り比較的簡単に開発できる? (個人
    の感想)
    

    View Slide

13. Relay を使った React Component
    ひとつの message を描画する React Component
    

    View Slide

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

    View Slide

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

    View Slide

16. Action Cable
    ● Rails が提供する WebSocket による Pub/Sub の仕組み
    ● アプリケーションプロセスの中で worker が動く
    ● graphql-ruby が Subscription のバックエンドとして Action
    Cable に対応している
    ● ちょっとした Web アプリで使ってみるにはうってつけ
    

    View Slide

17. Subscription Example
    with Relay and Action Cable
    

    View Slide

18. Subscribing New Messages
    

    View Slide

19. Server Side
    ● “GraphqlChannel” で Subscription を受け付ける
    ● 扱いたいイベントを定義
    ● Mutation のタイミングでイベントをトリガする
    

    View Slide

20. “GraphqlChannel”
    Subscription に使う Action Cable のチャネル。ここでは主に
    Subscription の登録を行なう。
    詳しくは:
    graphql-ruby.org/subscriptions/action_cable_implementation
    

    View Slide

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

    View Slide

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

    View Slide

23. イベントを発火する
    

    View Slide

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

    View Slide

25. Client Side
    ● 購読したいイベント毎に Subscription クエリを書く
    ● Subscribe 時にイベント発生時の振舞いを指定する
    ● Mutation のレスポンスが被るので捨てる (optional)
    

    View Slide

26. Client Side
    

    View Slide

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

    View Slide

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

    View Slide

29. 振舞いの指定 (Mutation と同じ)
    ● edgeName: 新しいリソースが、受け取ったペイロードの何とい
    うフィールド名で入っているか
    ● type: RANGE_ADD はリソースを connection に追加
    ● connectionInfo: どの connection に追加するか
    ● parentID: connection の親リソースの ID
    

    View Slide

30. Subscribe It
    app/javascript/AppMain.ts
    

    View Slide

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

    View Slide

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

    View Slide

33. 実用を踏まえた課題/検討事項
    ● Action Cable 単体では対応が難しい問題をどうするか
    ○ 不意の切断から再接続までのメッセージ取りこぼし
    ○ パフォーマンス?
    ● イベント発生時の GraphQL クエリをどこで実行するか
    ○ Subscription の数 x イベントの数 = たくさん
    ○ バックグラウンドジョブに移すのがベター
    ● クライアント側は Action Cable に対応する必要がある
    

    View Slide

34. Conclusion
    

    View Slide

35. Conclusion
    ● GraphQL に Subscriptionが加わったことで、GraphQL の仕様
    で作れるアプリケーションの幅が広がった
    ● 実装にはいくつか注意すべきポイントがある
    ● デモに使った例はこちら
    ○ github.com/hibariya/graphql-subscription-examples
    

    View Slide