Firebase WebSDK ver.9 でのFirestoreのクエリ例

Firebase webSDK バージョン9では機能ごとのモジュール化が進み、必要な機能だけをインポートすることが可能になりました。
これによって私の環境ではver8のコードと比べてコンパイル時のファイルサイズを半分程度に減らすことができたので、アプリの高速化が期待できます。

バージョン8からのアップグレードについては公式ドキュメントがあるので参考にして更新するといいでしょう。

今回はver.9で記述方法の変わったFirestoreのクエリについて簡単にまとめます。

import { initializeApp } from 'firebase/app'
import { getFirestore, collection, getDocs, getDoc, doc, query, where, orderBy } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: '********',
  authDomain: '********',
  projectId: '********',
  storageBucket: '********',
  messagingSenderId: '********',
  appId: '********',
  measurementId: '********',
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)

// 単一ドキュメントを取得するクエリ getDoc
// docでコレクション名とドキュメントIDを指定して取得
// サブコレクションにアクセスする場合は、続いてコレクション名ドキュメントIDを指定する
const user = await getDoc(doc(db, 'users', 'gesu'))
const secret = await getDoc(doc(db, 'users', 'gesu', 'following', 'hoge'))

const userData = user.exists() ? { ...user.data(), id: user.id } : null

// 複数のドキュメントを取得するクエリ getDocs
const users = await getDocs(
  query(collection(db, 'users'), where('age', '>', 20), orderBy('age', 'desc'), limit(100)),
)

const usersData = users.docs.map((doc) => ({ ...doc.data(), id: doc.id }))