Ep. 2 Most important Firebase Database methods for CRUD operations

Hello, Hola and Namaste!

Welcome to the second episode of a 3 part series where I would be writing about Firebase database. If you haven't read the first episode, you can read it here:

Ep. 1 How to integrate Firebase database with React.

In the last article, we successfully integrated Firebase with React.

Let's take the discussion one step forward. How do you perform CRUD operation on Firebase database? For those who are not familiar with what CRUD stands for, see 👇👇

Now, in the last article, we executed 👇 code to write an object to the root of the database

firebase.database().ref().set({
title:"Learn to integrate Firebase with React"
})

Let's break it down and understand the firebase.database().ref() before jumping onto methods like set, remove etc.

firebase.database(): This will give you a reference to the database services
ref(): Here's what official firebase docs have to say about Ref:

A Reference represents a specific location in your Database and can be used for reading or writing data to that Database location.

Now, ref() accepts the location in the database as an argument. 👇👇

Example

firebase.database().ref('users') will reference users object situated inside root of the database.
firebase.database().ref('users/Dev') will reference Dev created under Users.

2 points to remember here:

If the location entered in the ref argument doesn't exist, firebase will create one and write the data that you pass.
If no argument is provided, the data will be read or written off the root of the database.

Once you get hold of the database location, you can perform all sort of CRUD operations on them. Having said that, let's begin to play around with the database and see how we can write, update, remove and read to and from the database.

Write

In Firebase, you can make use of the set method to write data to the database. Be very careful when using it because it overwrites the existing data with whatever you put inside the set call.

Example:

firebase.database().ref('friends/Dev').set({
name:"Dev",
age:30,
isSingle:true
})

Update

What if you only want to update a specific property and not overwrite the entire data? Additionally it doesn't make sense to pass on the entire data to update one property in it.

That's where the update method comes handy. Same as set, it takes an argument and you can pass only those items which needs to update. Let's say Dev from the above example is not single anymore. Here's how you can update the info in firebase database:

firebase.database().ref('friends/Dev').update({
isSingle:false
})

Read

We are going to discuss 2 methods for reading the data from the database. One reads the data just once while the other reads whenever the data changes. Let's get started.

once

Call this method when you want to read the data just once. It takes only one argument; the event type. Since we are only trying to read the data from the specified location, we would pass in value.

Now once returns a promise and we can use the then and catch methods to get the data. How? here's how:

firebase.database().ref('friends/Dev')
     .once('value')
     .then((snapshot) => {
        console.log(snapshot.val())
     })

The promise returns a snapshot of the data we requested for and we can call the inbuilt val() method to access it.

But wait, what if I want to access the data every-time it changes? Time to go over another method that Firebase offers.

As mentioned, you can subscribe to this method and listen to the changes in data. The syntax differs from that of once with on no longer using promises. Why?

Because promise can only be resolved or rejected once and we want the function inside the then to run over and over again. So a better approach to use here is to use callback as an event listener.

Now, the on method takes 2 argument. Event type and a callback function. See the code 👇 for a better understanding.

firebase.database().ref('friends/Dev').on('value', 
   (snapshot) => {
        console.log(snapshot.val())
     })

Now, maybe in the distant future, you want to unsubscribe from this update and you can use the off method. No arguments needed.

firebase.database().ref('friends/Dev').off()

You can also use the off method to remove listeners registered on its child nodes.

remove

As the name suggest, it remove the data from the reference location.

firebase.database().ref('friends/Dev').remove()

Another way to remove data from the referenced location is by using the set method and passing null to it.

At this point, I highly recommend that you read the official documentation when you work with Firebase.

And this is all that I would be covering in this article. So far we have witnessed how to play around with strings, numbers, boolean and object. Handling Array data in firebase is a different ball game all-together and deserves an entire article for it which I would be writing about in the next few days. So watch out this space for much more coming your way soon.

Did I miss to mention something important? Let me know in comments section and I'd be happy to include it if it fits the bill. Alternatively, we can chit chat over twitter here

Also the usual and typical request: Comment, share subscribe. 😛 😝 😜

Until next time!

Rahul Nayak's Blog