Firebase v8→v9でFirestoreのコレクション取得やドキュメント追加などのデータ操作の書き方

以下の記事で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
    )
  )
}

さいごに

最初は書いてて分からん状態でしたが、書き進めて慣れてくると理解できるし、むしろ前よりコードがスッキリしたかなと思います。

参考サイト

その他詳しいことはドキュメントを見てください

• Cloud Firestore でデータを取得する
• Cloud Firestore にデータを追加する