Open
Description
現在、初期動作でonSnapshotしてメッセージを30件取得しているが、
初期の取得を非同期処理で行い、その後onSnapshotしてメッセージの追加を感知する形に変更したい。
目的としては以下がある。
- 初期動作でそのまま取得を行った場合、既存のデータの有無に応じて取得順序が影響を受ける。結果一時的にちぐはぐに画面が更新される問題を解決する
- 既存のデータが最新かを見分け、初期取得を最小に。画面表示速度を向上させる
- 一定までスクロールを行った場合にさらに古いデータを取得するといった実装を可能にするため
実装
src/pages/room/[id].tsx、
- 初期取得を終えているかを示す変数の定義を追加する。=>
loaded :Booleanとかで - 初期処理用のuseEffectにて、30件のメッセージを取得する => loadedをtrueに更新
- onSnapshot用のuseEffectにて、loadedがtrueの場合のみ処理を行う。（queryで取得するデータを一件に制限する）
（※メモ。後々実装する メッセージ配列はチャットルーム別にstoreに保存する。保存しているメッセージ配列の最新要素が最新メッセージであるかをidを元に比較し、最新でない場合はloadedをfalseにして初期取得を再度行うようにすれば、速度向上に大きく貢献可能なはず）
現在はメッセージ配列更新時に最下までスクロールを行っているが、
メッセージ配列更新時に「新しいチャット↓」みたいなslackみたいなチップを表示してもいいかも