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

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

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

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

const useFirebase = data => {}

export default useFirebase

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

const [documents, setDocuments] = useState(null)

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

const [documents, setDocuments] = useState(null)

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

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

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

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

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

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

collectionfirestoredataを指定します。

useEffect(() => {
  const firestore = firebaseApp.firestore

  const docRef = collection(firestore, data)
}, [data])

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

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

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

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

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

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をリターンします。

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”を指定します。

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 に保存します。

ブログ一覧