Q&A
4 階層すべてを一度に表示するとリスナーの数もすごいことになりますが、表示も大量になって見づらいのでは…。
前提
[前提]
言語 : JavaScript (or TypeScript)
フレームワーク： React
データベース : Firestore
具体的な状況
オンライン講座のシステムを作っています。
「講座」のデータは以下のような階層構造でデータを保持します。
Course > Section > Chapter > lecture
データ構造に関して具体例をあげますと、
- (Course) JavaScriptコース
- (Section) 第１部 JavaScriptの基礎
- (Chapter) 第１章 変数と定数
- (Lecture) 講座1 変数を宣言する
というようなデータを保持します。
Firestore上では、素直にサブコレクションを用意して、
Courses > Sections > Chapters > Lectures
という構造でデータをもたせています。
実現したいこと
Courses/Sections/Chapters/Lecturesの
すべての階層を一覧で表示したいため、
このデータを階層構造を保持した状態で、
Fetchしたいと考えています。
できればonSnapshotを使って、
リアルタイムリスナーでデータを取得したいと思ってます。
問題
前述の件を実現しようとすると、以下の手順で、データを取ってくる必要があります。
Course情報を取得する （リアルタイムリスナー) ↓ Course情報の取得を待つ ↓ Course情報が保持するSection情報を全件取得する（リアルタイムリスナー） ↓ Section情報の取得を待つ ↓ Section情報をループして、 各Section情報に紐づくChapter情報を全件取得する（リアルタイムリスナー） ↓ 以下Chapter,Lectureと同様のことをします。
これを実現しようとすると、
１． 毎回異なる数のリスナーを発行する必要がある。
2. すべてのリスナーに対してそのデータを格納する変数が必要になるため、その都度useStateを置く必要がある。
（可変な数の useStateを用意する。。）
となります。
うまく問題の具体例が出せず申し訳ないのですが、
複数のリアルタイムリスナーを連鎖させて実行させる場合の設計が作れない
という状況です。
リアルタイムリスナーは諦めた方が良いでしょうか。
アドバイスをいただけますと幸いです。
コメントありがとうございます。
表示は、トグルで表示・非表示できるようになっているので、
必要な箇所のみ表示する形になります。
デザイン、UI的には特に問題ないと考えています。
なら、トグルで表示にした時だけ subscribe すれば良いのかも。
というか、内容的にそんなに変更されるものでもないような気がするので、リアルタイムである必要もないのでは。
ありがとうございます。
おっしゃるとおりで、内容的にリアルタイム性が求められるものではないので、
subscribeをやめる方向で考えています。
今後のために、このようなネスト構造の時にイベントリスナーの連鎖はどうするか という事で質問させていただきました。
Firebase側では今回のケースのような階層構造のデータの取得はあまり想定されておらず、
UIや設計側でソリューションを考えた方が良いと認識しました。
コメントありがとうございます。
あなたの回答
tips
プレビュー
