Прочитайте всю коллекцию или отдельный документ из Firebase Firestore v9, используя JavaScript и React.

В 2021 году команда Firebase выпустила новый Firebase JS SDK.

Поскольку большинство руководств сосредоточены на Firebase v8, вот пост, в котором объясняется, как читать данные из базы данных Firebase с помощью v9.

Среди нескольких заметных улучшений стоит отметить:

  • Меньший размер пакета. Некоторые библиотеки стали на 80 % меньше.
  • Изменения в API библиотеки. Команда firebase в значительной степени полагалась на современные инструменты JavaScript, такие как webpack и Rollup, поэтому потребовались некоторые изменения.
  • Новый подпакет firebase/firestore/lite. Это легкое решение, когда «вам просто нужно получить коллекцию и вы не хотите включать все другие функции Firestore на свой сайт. ”

Если вы переносите свой код с версии 8, «это критическое изменение, которое потребует от вас обновления вашего кода».

Этот пост посвящен исключительно чтению данных из Firebase Firestore 9 и не поможет вам обновиться с версии 8 до модульного Web SDK.

Перво-наперво — не тратить свое время впустую

1 — Версия Firebase

Убедитесь, что вы используете Firebase v9.

Это может показаться тривиальным, но если вы запустите следующую команду в корневом каталоге вашего проекта

firebase --version

вы получите версию инструментов Firebase, а не версию Firebase! Команда выше похожа на

firebase tools --version

Однако вы хотите убедиться, что ваша версия Firebase — 9.x.x, где x — любое число.Вы можете увидеть свою версию Firebase в package.json.

или выполнив следующую команду в корневом каталоге вашего проекта

npm ls firebase

Кроме того, всякий раз, когда вы используете официальную документацию, убедитесь, что вы читаете о Firebase v9. Некоторые старые учебники ссылаются на Firebase v8, и их смешивание не является хорошей идеей.

Проверьте, указывает ли меню слева на v8 или v9.

2 — Firestore против базы данных реального времени

Еще один момент, который может сбить с толку, — это разница между Firestore и базой данных реального времени.

Firebase предоставляет два доступных для клиента типа облачных баз данных, которые обеспечивают синхронизацию данных в режиме реального времени:

  • Cloud Firestore — или просто Firestore — новейшая база данных Firebase. Это масштабируемая облачная база данных NoSQL. Согласно документации, он основан на базе данных реального времени и предлагает больше возможностей.
  • База данных в реальном времени — или просто База данных — это исходная база данных Firebase. Это эффективное решение с малой задержкой.

Проблема возникает, когда люди смешивают их, поэтому убедитесь, что вы всегда ссылаетесь на тот, который используете. В этом посте мы будем использовать Cloud Firestore.

Всегда проверяйте, указывает ли меню слева на базу данных в реальном времени или на Cloud Firestore. В некоторых случаях, как показано ниже, это может быть просто база данных и Firestore.

Несмотря на то, что Firestore является новейшей базой данных Firebase, вы не должны слепо использовать ее.

Очевидно, что ваш выбор решения для базы данных будет зависеть от многих факторов, и вы можете прочитать Ключевые соображения Firebase, чтобы получить более полное представление.

В этом посте мы будем использовать Cloud Firestore.

Чтение данных в Cloud Firestore v9 — Настройка

Если у вас уже есть проект Firebase и вы зарегистрировали свое приложение, следующий абзац можно пропустить.

Если вы не уверены, прежде чем двигаться дальше, ознакомьтесь со следующими ресурсами, на которые я ссылаюсь из документации.

Firebase и Firestore — быстрая настройка

  1. Создать проект Firebase
  2. Зарегистрируйте свое приложение
  3. Установите Firebase через npm install firebase

Следующие шаги проведут вас через а) инициализацию Firebase в вашем приложении и б) инициализацию Firestore в вашем приложении.

А) Инициализируйте Firebase в своем приложении

Инициализируйте Firebase в своем приложении. Я создал файл с именем firebase-config.js и написал следующий код.

// firebase-config.js

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

Вы можете найти информацию для заполнения объекта firebaseConfig следующим образом.

  1. Перейдите на https://console.firebase.google.com/
  2. Выберите свой проект
  3. В верхнем левом углу страницы вашего проекта щелкните значок шестеренки в правой части обзора проекта. Затем нажмите «Настройки проекта».

Вы окажетесь на странице настроек проекта.

Оставайтесь на вкладке Общие, как показано на рисунке выше. Прокрутите страницу вниз, где вы найдете раздел Ваше приложение. В этом разделе вы найдете установку и настройку SDK.

Вы увидите что-то вроде следующего кода. Однако вместо трех точек у вас будут значения, связанные с ключами в объекте firebaseConfig.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Вы можете скопировать весь файл в firebase-config.js.

В моем случае я не импортировал getAnalytics и не инициализировал analytics. Это необязательно.

Б) Инициализируйте Firestore в своем приложении

На этом этапе вы должны знать, что Cloud Firestore и другие службы доступны для импорта в отдельных подпакетах.

Итак, мы меняем код в firebase-config.js следующим образом:

import { initializeApp } from "firebase/app";
import { getFirestore } from "@firebase/firestore" // import Firestore package

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app) // make database available in your app

Я заполнил свою базу данных в Firestore некоторыми фиктивными данными следующим образом:

но вы можете заполнить его по своему усмотрению.

Теперь мы собираемся прочитать данные из Firestore. В частности, мы получим всю коллекцию и один документ из базы данных Firestore.

Чтение данных в Cloud Firestore v9

Если вы здесь, я предполагаю, что у вас есть проект Firebase, и вы инициализировали Firebase и Firestore в своем локальном приложении.

У вас также должны быть фиктивные данные в Firestore. Вы можете сделать это вручную или программно, следуя документации.

Читать всю коллекцию

В Firestore коллекции — это контейнеры для документов. В моем случае я создал две коллекции: классы и учителя. Документы являются единицами хранения. Вы можете думать о них как об объектах JavaScript с парами ключ-значение.

Коллекция classes содержит много документов class, а коллекция teachers содержит много документов учителя.

Вкратце, это фрагмент кода, который будет печатать все документы в коллекции classes.

// Component.jsx

import { db } from "../firebase-config";
import { collection, getDocs } from "firebase/firestore"; 

const classesCollection = getDocs(collection(db, "classes"));
classesCollection.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

Поскольку я работаю с компонентом React, а не с firebase-config.js, мне нужно импортировать экземпляр Firestore (db), связанный с предоставленным приложением firebase, из firebase-config.js.

Нам нужно импортировать коллекцию и getDocs из firebase/firestore.

Как это работает?

  1. Получить ссылку на коллекцию. Мы используем коллекциюиз firebase/firestore, чтобы получить ссылку на коллекцию в указанном месте. В нашем случае коллекция классов в экземпляре Firestore (db).
  2. Получить документы из коллекции. Затем мы оборачиваем результат в getDocs, чтобы получить данные с сервера. Поскольку он возвращает результаты в виде QuerySnapshot, вы можете увидеть примеры, присваивающие значение чему-то, называемому querySnapshot. В приведенном выше коде результат присваивается переменной с именем classCollection.
  3. Наконец, мы перебираем классыCollection и печатаем данные в консоли. Обратите внимание, что вы можете использовать метод .data() для получения полей в документе как объекта.

Есть лучшие способы структурировать эти операции, но для простоты мы пишем код в компоненте, который его использует.

Кроме того, это асинхронная операция.

Итак, сначала мы заключаем весь код в асинхронную функцию и добавляем ключевое слово await непосредственно перед getDocs.

Затем мы запускаем функцию из хука эффекта.

// Component.jsx

const fetchClasses = async () => {
  const classesCollection = await getDocs(collection(db, "classes"));
  classesCollection.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data()}`);
  });
}

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

Типичный компонент React может использовать код следующим образом:

// Component.jsx

import * as React from "react";
import { useEffect } from "react";
import { db } from "../firebase-config";
import { collection, getDocs } from "@firebase/firestore";

export const ClassesComponent = () => { 

  const fetchClasses = async () => {
    const classesCollection = await getDocs(collection(db, "classes"));
    classesCollection.forEach((doc) => {
      console.log(`${doc.id} => ${doc.data()}`);
    });
  }

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

}

Чтение одного документа в коллекции

Аналогичным образом мы можем прочитать один документ из коллекции.

Однако нам нужно импортировать doc и getDoc из firebase/firestore.

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

const classRef = doc(db, "classes", "classId");
const classSnap = await getDoc(classRef);

console.log("Class data:", classSnap.data());

Как это работает?

  1. Получить ссылку на документ. Мы используем doc из firebase/firestore, чтобы получить ссылку на документ в указанном месте. В нашем случае документ класса с идентификатором «classId» в коллекции classes. Обратите внимание, что classId должен быть уникальным идентификатором. Firestore генерирует что-то вроде «AuXRD0ABCqpSDO1QAR8L»;
  2. Получить документ по ссылке. Затем мы оборачиваем результат в getDoc, чтобы получить данные с сервера. Поскольку он возвращает результаты в виде DocSnapshot, вы можете увидеть примеры, в которых значение присваивается чему-то, называемому docSnapshot. В приведенном выше коде результат присваивается переменной с именем classSnap.

Типичный компонент React может использовать код следующим образом:

// Component.jsx

import * as React from "react";
import { useEffect } from "react";
import { db } from "../firebase-config";
import { doc, getDoc } from "firebase/firestore";

export const ClassComponent = () => { 

  const fetchClass = async () => {
    const classRef = doc(db, "classes", "classId");
    const classSnap = await getDoc(classRef);
    console.log("Class data:", classSnap.data());
  }

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

}

Выводы

Убедитесь, что вы следуете правильным руководствам и учебным пособиям. Они должны относиться к Firebase v9 и Cloud Firestore, если вы решите использовать этот пакет.

Код для веб-приложений в значительной степени представляет собой JavaScript и может использоваться в React или любой другой среде с небольшими изменениями.

Если вам хочется исследовать что-то новое, вы можете взглянуть на React Firebase Hooks. Библиотека нацелена на изучение того, как React Hooks может работать, чтобы сделать интеграцию с Firebase еще более простой, чем она есть.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.