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

GraphQL Subscription with Relay and Action Cable

GraphQL Subscription with Relay and Action Cable

Hibariya Hi

January 23, 2018
Tweet

More Decks by Hibariya Hi

Other Decks in Technology

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