FirebaseのFirestoreのCRUD操作をReactで行います。つまりCreate（addDoc）、Read(getDocs)、Update(updateDoc)、Delete(deleteDoc)です。お作法的なとこの備忘録でざっくり記載してます。setDocやwhere句、エラーハンドリングの説明なしです。
CREATE
<form onSubmit={onSubmit}>const onSubmit = async (event) => {
event.preventDefault();
const { name, email } = event.target.elements;
const ref = collection(db, 'users');
const res = await addDoc(ref, {
name: name.value,
email: email.value,
});
console.log(res);
};Formタグでサブミット時に自分のメソッドを呼ぶようにします。
非同期なのでasync/awaitで処理します。画面遷移しないようpreventDefaultします。
フォームのinputタグ要素からnameとemailを取り出します。
CollectionでDBの何を処理対象にするか記載します。
AddDocでDBに対して何を追加するか記載します。
READ
import { useState, useEffect } from 'react';
import { db } from '../firebase';
import { collection } from 'firebase/firestore';const [users, setUsers] = useState([]);useEffect(() => {
const ref = collection(db, 'users');
getDocs(ref).then((snapshot) => {
setUsers(snapshot.docs.map((doc) => doc.data()));
});
}, []);Stateで状態保存できるように準備しておきます。
CollectionでDBの何を取得するかを指定します。
GetDocsで取得を実行します。結果はsnapshotに入ります。
mapでループすると一件がdocに入ります。それのdata()を取り出してStateに保存してます。
UPDATE
const changeName = async (id) => {
const ref = doc(db, 'users', id);
await updateDoc(ref, {
name: “NONE”,
});
};DocでDBの何を操作するか設定します。USERSコレクションの特定のIDのドキュメントを指定してます。
UpdateDocでドキュメントに対してName箇所をNONEに更新します。
DELETE
const deleteUser = async (id) => {
const ref = doc(db, 'users', id);
await deleteDoc(ref);
};DocでDBの何を操作するか設定します。USERSコレクションの特定のIDのドキュメントを指定してます。
DeleteDocで対象を削除します。
