Slackのメッセージのリアクションを監視して、ReactのUIにリアルタイムに反映させたい。
やることは大きく分けて以下の３つ
- slackのメッセージにおけるリアクションの監視
- 対象メッセージのリアクション回数の更新
- ReactのUIに反映
slackのメッセージにおけるリアクションの監視
slack APIのEvent Subscriptionsを使う。
URLの指定
エンドポイントをここに入力。
今回はFlaskで事前に用意したエンドポイントを利用。
このエンドポイントでslackからjsonを受け取ってHasuraにクエリを投げる。
発火条件の指定
Subscribe to events on behalf of usersで発火条件を指定する。
今回は、リアクションが押された時に発火させたいので、以下の二つを有効にする。
- reaction_added
- reaction_removed
これでリアクションがあった時にエンドポイントにjsonが投げられる。
対象メッセージのリアクション回数の更新
Flaskで処理を行う。
今回は、指定のチャンネルのメッセージのリアクションのみ監視したかったため、チャンネル名でフィルターをかける。
次に、受け取ったjsonの中にメッセージのユニークなidが入っているので、これを元にHasuraの方にクエリを投げてリアクション回数を取得する。
その後、reaction_addedかreaction_removedでそのリアクション回数を増減させて最後にmutation。
ReactのUIに反映
apollo-clientを使ったsubscriptionは公式documentに沿えばok。
参考
Setting up GraphQL subscriptions using apollo-client
https://hasura.io/docs/1.0/graphql/core/guides/integrations/apollo-subscriptions.html#write-your-subscription
Create Subscription and Render Result
https://hasura.io/learn/graphql/react/subscriptions/3-create-subscription/