【Firebase】Firestore Databeseのデータを、リアルタイムで取得する
Firebase

【Firebase】Firestore Databeseのデータを、リアルタイムで取得する

作成日:2022年02月06日
更新日:2022年02月07日

前回は、Firestore Databese の単一データを所得し、フロントエンドに表示しました。

firebase-firestore-database-get

【Firebase】Firestore Databeseの単一データを取得し、フロントエンドに表示する

今回は、Firestore Databese のデータベースをリアルタイムで取得します。

まずは、どのコンポーネントでも値が受け取れるようにしたいので、フックを作成します。

hooks フォルダを作成し、useFirebase.js を作成しましょう。

jsx
const useFirebase = (data) => {};
export default useFirebase;

useStateで状態管理しましょう。

jsx
const [documents, setDocuments] = useState(null);

※useState の中身を null にしてしまうと、エラーが発生します。 以下のコードに修正してください。

jsx
const [documents, setDocuments] = useState(null);

詳しくは、こちらでご確認ください。

react-useeffect-null

【React】エラー『Uncaught TypeError: Cannot read properties of null (reading '0')』を解消する

firebase/firestore からcollectiononSnapshotをインポートします。

jsx
import { collection, onSnapshot } from "firebase/firestore";

useEffectを設定し、フックにdataを設定ます。

firebaseAppをインポートし、firestoreを使用します。

jsx
useEffect(() => {
const firestore = firebaseApp.firestore;
}, [data]);

collectionfirestoredataを指定します。

jsx
useEffect(() => {
const firestore = firebaseApp.firestore;
const docRef = collection(firestore, data);
}, [data]);

onSnapshot を使って、データを取得します。

また、results という空の配列を準備しましょう。

データを results に入れるようにします。

jsx
onSnapshot(docRef, (snapshot) => {
let results = [];
snapshot.docs.forEach((doc) => {
results.push({ ...doc.data(), id: doc.id });
});
setDocuments(results);
});

onSnapshot を関数としてリターンします。

jsx
useEffect(() => {
const firestore = firebaseApp.firestore;
const docRef = collection(firestore, data);
const unsub = onSnapshot(docRef, (snapshot) => {
let results = [];
snapshot.docs.forEach((doc) => {
results.push({ ...doc.data(), id: doc.id });
});
setDocuments(results);
});
return () => unsub();
}, [data]);

状態管理しているdocumentsをリターンします。

jsx
import { firebaseApp } from "../firebase/firebaseConfig";
const useFirebase = (data) => {
const [documents, setDocuments] = useState(null);
console.log(documents);
useEffect(() => {
const firestore = firebaseApp.firestore;
const docRef = collection(firestore, data);
const unsub = onSnapshot(docRef, (snapshot) => {
let results = [];
snapshot.docs.forEach((doc) => {
results.push({ ...doc.data(), id: doc.id });
});
setDocuments(results);
});
return () => unsub();
}, [data]);
return { documents };
};
export default useFirebase;

こちらのフックを BooksGet.js にインポートし、使用します。

引数には、collection である”Books”を指定します。

jsx
const BooksGet = () => {
const { documents: books } = useFirebase("Books");
console.log(books);
return books[0] ? (
books.map((book) => (
<div key={book.id}>
<p>{book.title}</p>
<p>{book.author}</p>
<p>{book.category}</p>
</div>
))
) : (
<p>データがありません</p>
);
};
export default BooksGet;

ブラウザで確認すると、

image2

Firebase Database のデータが表示されました。

試しに、Firebase Database でデータを入力すると、

image3

image4

即座にブラウザが更新されました。

次回は、ブラウザで送信したデータを、Firestore Databese に保存します。

firebase-firestore-database-post

【Firebase】ブラウザで送信したデータを、Firestore Databeseに保存する

© 2024あずきぱんウェブスタジオ