【Chat用UI】は大変だ

仕様

• webでチャットができる
• LINEみたいな感じで見れる

順序解説

react x apollo x intersectionObserver x auto scroll用のelementのようなイメージ

1. メッセージ一覧を10件くらい取得する
2. auto scroll機能で要素の一番下に行く
3. observeする要素を決定する
4. ユーザーがその要素を横切る
5. 新たに10件取得する
6. このときauto scrollはせず、要素は固定しておきつつも要素が増える
   • メモ: server sideのgraphql のconnectionをbackword pagination用の設定にする

想定される追加要件 1. メッセージの自動更新 2. メッセージをcacheする

自動更新機能ってとてもリッチ。

初期段階でwebsocketなど使いたくないね🥹

と思いつつも、ユーザー間のすれ違いが起こるのでほぼ必須という罠...

(要件次第では一方通行でもOKなのが若干の救いである)