やりたいこと
- client side joinで取得する際、親コンポーネント側で先に全データを取得したい
前提
- nuxt.jsでtwitterのタイムラインに近いものを作っている
- firestoreのデータ設計は、タイムライン情報は一括のコレクションで管理し、その詳細情報を外部キーで別のコレクションから取得している
- 今後冗長化させる想定でいるが、ひとまずclient side joinで実装している
困っていること
- firestoreのデータ取得に掛かる時間が以下の2つで異なる
- pagesコンポーネントではタイムラインコレクションのみ取得し、子コンポーネントのmountedで外部キーとなるコレクションを取得する
- pagesコンポーネントで外部キーのコレクションを含む全データを取得して子コンポーネントにデータを渡す
- 1.から2.の方法に変更したところ、非常に遅くなった
- タイムラインコレクションのドキュメント数200件、それぞれのタイムラインドキュメントに対して4種類のコレクションからドキュメントを再取得しておおよそ30秒程度(1.の方法では5秒程度)
- 1.から2.の方法に変更したところ、非常に遅くなった
バージョン情報
- nuxt 2.11.0
- firebase 7.6.0
2.のコードサンプル
const func = async () => { let parentDataArray = [] // タイムライン情報の取得処理 await firebase.firestore().collection('timeline').get() .then(snapshot => { snapshot.forEach(doc => { parentDataArray.push(doc.data()) }) }) // 詳細情報の取得処理 parentDataArray = await Promise.all( parentDataArray.map(async parentDoc => { const userPromise = firebase.firestore().collection('user').doc(userId).get() cosnt replyPromise = firebase.firestore().collection('reply').doc(replyId).get() cosnt other1Promise = firebase.firestore().collection('other1').doc(other1Id).get() cosnt other2Promise = firebase.firestore().collection('other2').doc(other2Id).get() const [user, reply, other1, other2] = await Promise.all([userPromise, replyPromise, other1Promise, other2Promise]) return { ...parentDoc, user, reply, other1, other2 } })) return parentDataArray }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。