web
Firebase v8→v9でFirestoreのコレクション取得やドキュメント追加などのデータ操作の書き方
公開日:2021年11月27日
最終更新日:2021年11月29日
以下の記事でFirebase v9にて初期化はできましたが、Firestoreでコレクションやドキュメントの追加、アップデート、削除などで書き方が変わっていました。
https://www.mismith.me/blog/web/firebase-version9
ある程度書いたら書き方分かってきます。コレクションを取得するときは collection
、ドキュメントを取得するときは doc
、それぞれ追加や更新するときは addDoc
や updateDoc
、deleteDoc
を使います。
データの取得
コレクションリストの取得
以下のように、初期化したfirestoreをimportし、collection以下の階層はコンマ区切りで指定していきます。
import {
getDocs,
collection,
query,
orderBy,
DocumentData,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'
// 省略
const getData = async () => {
const q = query(
collection(firestore, 'users', user.uid, 'todo'),
orderBy('createdAt', 'desc')
)
const querySnapshot = await getDocs(q)
const reduceList = querySnapshot.docs.reduce(
(acc: TodoItem[], doc: DocumentData) => [
...acc,
{
id: doc.id,
title: doc.data().title,
details: doc.data().details,
},
],
[]
)
setData(reduceList)
}
ドキュメントの取得
コレクションにぶら下がってるドキュメントの取得です。 routerQuery
は取得したいドキュメントのidを何かしらの方法で取得している前提です。個人的にはNext.jsを使ってるので、URLからidを取得したパターンで書いてます。
import {
getDoc,
doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'
// 省略
const getData = async () => {
const docRef = doc(
db,
'users',
user.uid,
'todo',
routerQuery.todoid
)
const querySnapshot = await getDoc(docRef)
setData(querySnapshot.data())
}
データの追加
次はデータの追加です。ざっと以下のように書きます。Timestampを使いたい場合はfirestoreからimportします。
import { addDoc, collection, Timestamp } from 'firebase/firestore'
import { db } from '@/lib/firebase'
// 省略
const addData = async (data: addData) => {
const docRef = await addDoc(
collection(db, 'users', user.uid, 'todo'),
{
title: data.title,
details: data.details,
createdAt: Timestamp.fromDate(dayjs(new Date()).toDate()),
}
)
console.log(docRef.id)
}
データの更新
データの更新にはupdateとsetがあります。updateはデータがあれば上書きするだけなのに対し、setはデータがなければ作成し、データがあれば上書きします。場面に応じて使い分けましょう。
書き方に大差はないのですが、一応どちらも書いときます。
import {
updateDoc,
setDoc,
doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'
// 省略
const updateData = async (data: FromValue) => {
await updateDoc(
doc(
db,
'users',
user.uid,
'todo',
routerQuery.id
),
{
title: data.title,
details: data.details,
}
)
}
const setData = async (data: FromValue) => {
await setDoc(
doc(
db,
'users',
user.uid,
'todo',
routerQuery.id
),
{
title: data.title,
details: data.details,
}
)
}
データの削除
もうここまでくれば何となくわかると思います。
import {
deleteDoc,
doc,
} from 'firebase/firestore'
// 省略
const deleteData = async () => {
await deleteDoc(
doc(
db,
'users',
user.uid,
'todo',
routerQueryid
)
)
}
さいごに
最初は書いてて分からん状態でしたが、書き進めて慣れてくると理解できるし、むしろ前よりコードがスッキリしたかなと思います。
参考サイト
その他詳しいことはドキュメントを見てください
Read next
- 2021年11月14日FIrebase v9 × Next.js × Vercelの初期化でハマったところ
- 2021年11月20日Next.js × microCMSでカテゴリ一覧ページを作る
- 2021年11月18日Gatsby × Netlify から Next.js × Vercelに乗り換えました