[Firebase] Using Cloud Firestore as Database

In this posting, we will use the Cloud Firestore of Firebase.

Cloud Firestore is a NoSQL database.

For focusing on Firebase usage, I'm not focusing on the React application.

Sample React Application

I made a React application for this practice.

Please make your own application.

Briefly explanation, If I click the Input button, the input message will be sent to the Firebase DB.

And the message will be shown below.

If I click the pencil icon, I can edit the message and will be updated the Firebase DB as well.

If I click the trash icon, the message will be deleted and Firebase DB as well.

Firebase Configuration

Go to the Cloud Firestore page and click the [Create Database] button.

Select the mode which you want, and click the [Next] button.

I chose the test mode because I want to simply test.

Select the location of the Cloud Firestore, and click the [Usage Setting] button.

Now, we can use Cloud Firestore.

Use Cloud Firestore in the React Application

Please find the config the Firebase with React in the below posting.

2020/10/04 - [Web/Etc] - [Firebase] Firebase Authentication with React

Now, add this code into the fbConfig.js.

import "firebase/firestore";

export const dbService = firebase.firestore();

Now, we can use the Firestore.

Create a New Data and Add to Firestore

dbService.collection(Collection).add(Document)

You can add the data to the DB.

Collection is the name of the group of data, and the Document is a data.

Document consists of key-value pairs.

 

I used it like this.

const onInput = async () => {
  const itemObj = { id: uuid(), message: newItem, createdTime: Date.now() };
  await dbService.collection("items").add(itemObj);
  setNewItem("");
};

In the Firestore, it looks like the below.

The name of the collection is items as I given.

Get Data from Firestore

you can get data from Firestore through onSnapshot function.

useEffect(() => {
  dbService.collection("items").onSnapshot((snapshot) => {
    const itemArray = snapshot.docs.map((doc) => ({
      docId: doc.id,
      ...doc.data(),
    }));
    setItems(itemArray);
  });
}, []);

I used it with useEffect hooks.

doc.Id gives us the document's ID so we can access data with this.

I kept this ID for editing and deleting data.

Delete Data in Firestore

This is my test application.

If I click the trash icon, the data will be deleted in Firestore.

Delete data just call a delete function.

const onDelete = async () => {
  await dbService.doc(`items/${itemObj.docId}`).delete();
};

Edit Data in Firestore

Edit is also simple.

You just call the update function with data to update.

const onCheck = async () => {
  await dbService.doc(`items/${itemObj.docId}`).update({
    message: editItem,
  });
  setIsEdit(false);
};

This is my test function.

The message field will be updated.