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

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

単一データが取得できたかわかるように、Firestore Database にデータを追加しました。

image2

まずは、先日作成した BooksGet.js の内容をコピーし、編集します。

import React, { useState, useEffect } from "react"
import { firebaseApp } from "../firebase/firebaseConfig"

const BookGet = () => {
  const [book, setBook] = useState([])

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

    getBook()
  }, [])

  return (
    <div>
      <p>{book.title}</p>
      <p>{book.author}</p>
      <p>{book.category}</p>
    </div>
  )
}

export default BookGet

useEffectの中で async/await が使えるようにします。

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

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

import { getDoc, doc } from "firebase/firestore"

docを使って、単一データを指定しましょう。

const getBook = async () => {
  const docRef = doc(firestore, "Books", "OriihusPZx14s2Equ5fg")
}

単一データを取得するために、getDocを使います。

const getBook = async () => {
  const docRef = doc(firestore, "Books", "OriihusPZx14s2Equ5fg")
  const docSnap = await getDoc(docRef)
}

docSnapdata()setBookで状態管理します。

一通り完了したので、ブラウザで確認すると、

ID で指定したデータのみ取得することができました。

image3

単一データを取得できています。

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

ブログ一覧