Firebase

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

作成日：2022年02月06日

更新日：2022年02月07日

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

【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】エラー『Uncaught TypeError: Cannot read properties of null (reading '0')』を解消する

firebase/firestore からcollectionとonSnapshotをインポートします。

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

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

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

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

collectionにfirestoreとdataを指定します。

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;