Zenn
Open3

Firestore CRUD (Frontend)

Firestore
TypeScript
frontend
ピン留めされたアイテム
nqnq

Firebase Javascript SDK v9

nqnq

Create & Update

import { getFirestore } from "firebase/firestore";
import { FirebaseOptions, initializeApp } from "firebase/app";
import { doc, setDoc } from '@firebase/firestore';

const response = await fetch("/__/firebase/init.json");

const options: FirebaseOptions = await response.json();

const app = initializeApp(options);

const firestore = getFirestore(app);

const document = doc(firestore, "path", "docmentId");

setDoc(document, {column: "value"})
nqnq

Read

collection

import { getFirestore } from "firebase/firestore";
import { FirebaseOptions, initializeApp } from "firebase/app";
import { collection } from '@firebase/firestore';

const response = await fetch("/__/firebase/init.json");

const options: FirebaseOptions = await response.json();

const app = initializeApp(options);

const firestore = getFirestore(app);

const document = collection(firestore, "collectionName");

getDocs(document, {column: "value"})

collection group

import { getFirestore } from "firebase/firestore";
import { FirebaseOptions, initializeApp } from "firebase/app";
import { collectionGroup } from '@firebase/firestore';

const response = await fetch("/__/firebase/init.json");

const options: FirebaseOptions = await response.json();

const app = initializeApp(options);

const firestore = getFirestore(app);

const document = collectionGroup(firestore, "collectionGroupName");

getDocs(document, {column: "value"})

document

import { getFirestore } from "firebase/firestore";
import { FirebaseOptions, initializeApp } from "firebase/app";
import { doc } from '@firebase/firestore';

const response = await fetch("/__/firebase/init.json");

const options: FirebaseOptions = await response.json();

const app = initializeApp(options);

const firestore = getFirestore(app);

const document = doc(firestore, "path", "docmentId");

getDoc(document, {column: "value"})