DEV Community

Cover image for Firebase 8 Vs 9: Compare Cloud Firestore CRUD Queries
Raja Tamil
Raja Tamil

Posted on • Originally published at softauthor.com

Firebase 8 Vs 9: Compare Cloud Firestore CRUD Queries

#javascript #firebase #programming #webdev

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

Getting Started With Firebase – Version 9

  1. Install Firebase 
npm install firebase@9.6.11
Enter fullscreen mode Exit fullscreen mode
  1. Import Firebase to the project 
import { initializeApp } from 'firebase/app';
Enter fullscreen mode Exit fullscreen mode
  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);
Enter fullscreen mode Exit fullscreen mode

Getting Started With Firebase Version 8

  1. Install Firebase 
npm install firebase@8.2.3
Enter fullscreen mode Exit fullscreen mode
  1. Import Firebase to the project 
import firebase from 'firebase';
Enter fullscreen mode Exit fullscreen mode
  1. Add Firebase configuration and initialization code to your project 
const firebaseConfig = { apiKey: "********", authDomain: "********", projectId: "********", storageBucket: "********", messagingSenderId: "********", appId: "********", measurementId: "********" }; firebase.initializeApp(firebaseConfig);
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

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

Add Data To Cloud Firestore – Version 8

  1. Import Firebase where you would like to make a query. 
import firebase from "firebase";
Enter fullscreen mode Exit fullscreen mode
  1. Then, create a query to add data to the Cloud Firestore. 
const db = firebase.firestore(); db.collection("users").doc().add({name: "Raja Tamil"});
Enter fullscreen mode Exit fullscreen mode

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()); }); });
Enter fullscreen mode Exit fullscreen mode

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()); }); }); },
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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); }); },
Enter fullscreen mode Exit fullscreen mode

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"); });
Enter fullscreen mode Exit fullscreen mode

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); }); },
Enter fullscreen mode Exit fullscreen mode

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

Happy Coding!

Top comments (0)