Firebase 8 Vs 9: Compare Cloud Firestore CRUD Queries

In this short Firebase tutorial, you’re going to see a side by side comparison of Firebase 8 Vs Firebase 9 on making CRUD queries to Cloud Firestore.

Getting Started With Firebase

• Version 9
• Version 8 Add Data Cloud Firestore
• Version 9
• Version 8 Read Data Cloud Firestore
• Version 9
• Version 8 Update Data Cloud Firestore
• Version 9
• Version 8 Delete Data Cloud Firestore
• Version 9
• Version 8

Getting Started With Firebase – Version 9

1. Install Firebase

npm install firebase@9.6.11

1. Import Firebase to the project

import { initializeApp } from 'firebase/app';

1. Add Firebase configuration and initialization code

To get the code, you’ll need to create a new Firebase project from the Firebase Console.

const firebaseConfig = {
  apiKey: "********",
  authDomain: "********",
  projectId: "********",
  storageBucket: "********",
  messagingSenderId: "********",
  appId: "********",
  measurementId: "********"
};
initializeApp(firebaseConfig);

Getting Started With Firebase Version 8

1. Install Firebase

npm install firebase@8.2.3

1. Import Firebase to the project

import firebase from 'firebase';

1. Add Firebase configuration and initialization code to your project

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

firebase.initializeApp(firebaseConfig);

Add Data To Cloud Firestore – Version 9

1. Import a specific module you would like to use from the Cloud Firestore by destructing it wherever you would like to make a query.

In this case, getFirebase which is the database, collection and addDoc.

import { getFirestore, collection, addDoc } from "firebase/firestore";

Then, create a query to add data to the Cloud Firestore.

const db = getFirestore();
const userRef = collection(db, "users");
addDoc(userRef, {name: "Raja Tamil"});

Add Data To Cloud Firestore – Version 8

1. Import Firebase where you would like to make a query.

import firebase from "firebase";

1. Then, create a query to add data to the Cloud Firestore.

const db = firebase.firestore();
db.collection("users").doc().add({name: "Raja Tamil"});

Read Data From Cloud Firestore – Version 9

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

const db = getFirestore();
const userRef = collection(db, "users");

getDocs(userRef).then((snap) => {
      snap.forEach((doc) => {
        console.log(doc.id);
        console.log(doc.data());
      });
});

Read Data From Cloud Firestore – Version 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .get()
        .then(snap => {
           snap.forEach((doc) => {
            console.log(doc.id);
             console.log(doc.data());
           });
        });
    },

Update Data To Cloud Firestore – Version 9

import { getFirestore, collection, setDoc, doc } from "firebase/firestore";

const db = getFirestore();
const userRef = doc(db, "users", "ZOnRzcL9rFkX2yRWZYFZ");
setDoc(userRef, { name: "Pagalavan Tamil" }, { merge: true });

Update Data To Cloud Firestore – Version 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .doc(id)
        .set({
           name: "Pagalavan Tamil"
         })
        .then(() => {
           console.log("deleted);
        });
    },

Delete Data From Cloud Firestore – Version 9

import { getFirestore, deleteDoc, doc } from "firebase/firestore";

const db = getFirestore();
deleteDoc(doc(db, "users", "ZOnRzcL9rFkX2yRWZYFZ")).then(() => {
      console.log("deleted");
});

Delete Data From Cloud Firestore – Version 8

import firebase from "firebase";

  const db = firebase.firestore();
      db.collection("users")
        .doc(userId)
        .delete()
        .then(() => {
           console.log("deleted);
        });
    },

Let me know in the comments below if you would like to add any additional queries in this tutorial.

Happy Coding!