ぼくは今、Vue.jsとFirestoreでクイズアプリを作っています。
Firestoreで作成したコレクションから参照フィールドを使用してデータを取得する方法がわからなかったため、備忘録としてまとめます。
バージョン
- vue 3.3.11
- firebase 10.8.0
記事の信頼性
- 2023年6月に独学で未経験から社員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
目次
問題
Firestoreにcategoriesコレクションとquizzesコレクションの2つを作成していました。
それぞれのフィールドは次のとおりです。
| categoriesコレクション | |
| id | string |
| title | string |
| description | string |
| display_order | number |
| quizzesコレクション | |
| id | string |
| quiz_category_id | reference |
| content | string |
| explanation | string |
| display_order | number |
quizzesコレクションの参照フィールドquiz_category_idを使用し、特定のカテゴリに紐づくクイズを取得したいため、以下のように実装していました。
const quizzesCollectionRef = collection(db, "quizzes")
const quizzes = ref<QuizType[]>([]);
const getQuizByCategoryId = (categoryId: string) => {
// categoryId を使用してクイズデータを取得
const q = query(quizzesCollectionRef, where("quiz_category_id", "==", categoryId));
onSnapshot(q, (snapshot) => {
quizzes.value = snapshot.docs.map((doc) => {
return {
id: doc.id,
quizCategoryId: doc.data().quiz_category_id,
content: doc.data().content,
explanation: doc.data().explanation,
displayOrder: doc.data().display_order,
}
})
// テストのためコンソールに出力したい
console.log(quizzes.value)
})
}しかしコンソールには何も出力されません。
なぜデータが取得できないのか原因がわからず時間がかかってしまいました、、。
解決策
結論として、以下のように修正するとcategoryIdをキーにクイズを取得できるようになります。
const quizzesCollectionRef = collection(db, "quizzes")
const quizzes = ref<QuizType[]>([]);
const getQuizByCategory = (categoryId: string) => {
// カテゴリIDに基づいて参照オブジェクトを作成
const categoryRef = doc(db, "categories", categoryId);
// 作成した参照オブジェクトを使用してクイズデータを取得
const q = query(quizzesCollectionRef, where("quiz_category_id", "==", categoryRef));
onSnapshot(q, (snapshot) => {
quizzes.value = snapshot.docs.map((doc) => {
return {
id: doc.id,
quizCategoryId: doc.data().quiz_category_id,
content: doc.data().content,
explanation: doc.data().explanation,
displayOrder: doc.data().display_order,
}
})
// テストのためコンソールに出力したい
console.log(quizzes.value)
})
}参照フィールド（reference）を使用してデータを取得したい場合は、↑のように参照オブジェクトを作成し、その参照オブジェクトを使って条件を指定する必要がありました。
これで無事に実装できるようになります！
おわりに
Firestoreを使いこなせるようになれば、簡単なアプリをフロントエンドだけで実装できるようになるため、ぜひとも理解を深めたいですね。
コメント