Introducing Cloud Firestore

First Published: 25 October 2017
Updated on: 24 September 2018

Unless you’ve been living in a cage with no internet access you’re probably very excited about Cloud Firestore.

It’s the new database Firebase launched, the fundamental differences with the Firebase Real-Time Database (RTDB for short) are:

  • Document/Collection based instead of a big JSON tree.
  • Supports chained queries.
  • Has offline persistence for its web SDK.

A few weeks before writing this I emailed my subscribers asking what excited them the most, and without a doubt, offline persistence and chained queries were tied neck to neck.

Today will learn how to integrate Cloud Firestore into our Ionic projects using AngularFire2 and will cover how to CRUD data from it.

If you want to take a deep dive into Firestore make sure to check out my FREE crash course, it will teach you all the basics to get started in under 30 minutes :-)

Integrate Cloud Firestore

To integrate Cloud Firestore into your Ionic app, the first thing you need to do is to make sure you’re using at least version 4.5.0 of the Firebase JS SDK and version 5.0.0-rc.1 of AngularFire2.

npm install firebase@latest angularfire2@latest

Once that’s installed, go into your app.module.ts folder and import the AF2 packages we’ll use:

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';

And then add it to your imports array inside the @NgModule:

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  ...
})

NOTE: The only thing you need to do to enable offline persistence is to add it to AngularFirestoreModule.

AngularFirestoreModule.enablePersistence();

CRUD with Cloud Firestore

Once everything is “up and running,” we’ll create a few examples of how to manipulate data.

First, remember what I said in the beginning, Cloud Firestore is a Document based NoSQL database, if you need to learn more about that, this quick video from the Firebase team will help.

Reading Data from the DB

To read a list of data, you have to create a reference to it first, in this case, we’ll imagine that we have a collection called groceryList in our database.

Inside that collection, we’ll have different documents for different groceries.

Let’s create that reference:

const groceryListRef = this.fireStore.collection < Grocery > `/groceryList`;

That line is creating a reference to the groceryList collection in our database, and now we can play with it.

If we want to fetch the grocery list to display on our page, then our code would look something like this:

this.groceryList = groceryListRef.valueChanges();

That’s it, and now you can display it in your HTML like this:

<ion-list>
  <ion-list-header>
    My Home's Groceries
  </ion-list-header>
  <ion-item *ngFor="let grocery of groceryList | async">
    <h2>
      {{ grocery.name }}
    </h2>
    <h3>There are <strong>{{ grocery.quantity }} </strong> in stock.</h3>
  </ion-item>
</ion-list>

Since .valueChanges() returns an Observable for us to use, we can use the async pipe to tell our HTML that the data is coming in asynchronously.

Push data to the DB

Writing Cloud Firestore feels weird, so going to keep it just as Firestore.

To add a new grocery to that list, Firestore gives us the .add() method, very similar to the .push() method we use in the RTDB.

groceryListRef.add({
  name: 'Apple',
  quantity: 5,
  inShoppingList: false
});

That will create a new document located at groceryList/<new_grocery_id>/

Updating data from the DB

To update a value from a document we can use the .update function

groceryListRef.doc(new_grocery_id).update({
  quantity: 8
});

That will go into the document and change the quantity from 5 to 8.

Deleting data from the DB

And lastly, to delete an item from that list you’d need to call .delete() in the document:

groceryListRef.doc(new_grocery_id).delete();

Next Steps

If you have any questions don’t forget you can always leave a comment below.

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.