前回は、Firestore Databese を作成しました。

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

まずは、アプリで Firestore を使用できるようにします。

先日作成した firebaseConfig.js 内にgetFirestoreをインポートします。

import { getFirestore } from "firebase/firestore"

getFirestorefirebaseを指定します。

const firestore = getFirestore(firebase)

firestoreをエクスポートしましょう。

export const firebaseApp = {
  firestore,
}

次に、BooksGet コンポーネントを作成します。

useState で books の状態を管理します。

const [books, setBooks] = useState([])

次に useEffect を使って、初めて読み込まれた時に Forestore Database のデータを読み込むようにします。

useEffect(() => {}, [])

firebaseConfig から firebaseApp をインポートします。

import { firebaseApp } from "../firebase/firebaseConfig"

firebaseApp の firestore を使用します。

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

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

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

collection を使って、Firestore Database のコレクションを呼び出します。

第一引数にはfirestore、第二引数にはコレクション名を指定します。

image2

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

  const docRef = collection(firestore, "Books")
}, [])

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

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

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

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

  const docRef = collection(firestore, "Books")

  getDocs(docRef).then(snapshot => {
    let results = []

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

setBooksresultsを設定しましょう。

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

  const docRef = collection(firestore, "Books")

  getDocs(docRef).then(snapshot => {
    let results = []

    snapshot.docs.forEach(doc => {
      console.log(doc)
      results.push({ id: doc.id, ...doc.data() })
    })
    setBooks(results)
  })
}, [])

一通り完了したので、立ち上げてみます。

アプリが立ち上がった後、Console を確認すると、

image3

Firebase が接続されていませんというエラーが発生しました。

これは、Firebase の初期設定がうまくいっていないからエラーになっています。

調べたところ、.env の書き方が間違っていたので、正しく書き換えます。

間違い(セミコロンになっていています。さらに、さらにコンマもあります)

image4

正しい(コンマを削除し、『=』にしました)

image5

※もし、値にスペースが含まれているなら、ダブルクォートが必要です。

修正すると、

image6

まだエラーが発生しています。

この場合は、一度ターミナルでnpm installを実行し、再度立ち上げます。

Console を確認すると、

image7

エラー内容が変わりました。

これは、Firebase でデータの読み取りが許可されていませんということです。

Firebase へアクセスします。

プロジェクトの FIrestore Database へアクセスします。

『ルール』をクリックします。

image8

コードが出てきました。

image9

こちらの if false となっているので、今のところ誰でもアクセスすることができなくなっています。

今のところ、false から true へ変更します。

『公開』をクリックします。

image10

アプリに戻って、再度確認します。

Console を確認すると、エラーがなくなりました。

books を console.log で確認すると、

image11

データを取得することができました。

データがある場合は、ブラウザにデータを表示するようにし、データがない場合は、『データがありません』と表示するようにします。

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>
)

ブラウザで確認すると、

image12

データがブラウザに表示されました。

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

ブログ一覧