Query Firestore using TypeScript


Objectives

Learn how to query Firestore data using a simple TypeScript script.

Intro to Firestore Data Model

  • Each document contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.
  • All documents must be stored in collections. Documents can contain subcollections and nested objects, both of which can include primitive fields like strings or complex objects like lists.
  • Collections and documents are created implicitly in Cloud Firestore. Simply assign data to a document within a collection. If either the collection or document does not exist, Cloud Firestore creates it.

Create a firebase project and register your web app

First, follow the firebase documentation to setup your firebase project. After setting up, you could register your web app and add Firebase SDK to your application. You should see something like this:

Copy the config information and continue to the next step.

Initialize the firestore in a TypeScript file

Connect to Firestore

Import the necessary functions from the Firebase SDK to initialize and access Firestore. Then swap out your firebase config. Next, initialize the Firebase app using the provided configuration object and assigns it to the variable app. After that, use the getFirestore function to create a Firestore instance and assigns it to the variable db. Finally, export the db variable, allowing other parts of the code to import and use the Firestore instance for database operations.

Add/Update data field to Firestore

  • Define an asynchronous function called addData that takes in parameters for name, age, and college.
  • Inside addData, create a reference to a Firestore collection named "test" using the collection function and the db instance.
  • Try to retrieve all the documents in the "test" collection using the getDocs function and awaits the result.
  • If successful, iterate over each document and retrieves the document ID.
  • Create a document reference using the doc function and the objects reference and document ID.
  • Inside the inner try block, update the document with the new fields using the updateDoc function and the document reference.
  • If the update is successful, log a success message to the console.

When you run the code and make changes to the documents in the Firestore collection, those changes will be reflected immediately in the Firebase console. You can observe the updated data in real-time as you interact with the Firestore database.

Query Firestore Data: Search

Let's walk through the code:

  • Define an asynchronous function named queryFirestore that takes a name parameter.
  • Create a reference to the "test" collection in the Firestore database using the collection function.
  • Create a query object using the query function, filtering the documents where the "name" field is equal to the provided name.
  • Try to execute the query and await the result using the getDocs function.
  • If the query result is not empty, retrieve the first document's data and log it to the console as a success message.

Conclusion

Some advantages of using Firestore

  • Real-time data synchronization: Firestore provides real-time data synchronization, allowing multiple clients to receive instant updates whenever the data changes. This makes it ideal for building collaborative and real-time applications like chat apps, collaborative document editing, and real-time dashboards.
  • Flexible data modeling: Firestore's document-oriented data model allows you to structure and organize data in a flexible manner. You can use collections and documents to represent your data hierarchy, and fields within documents to store data attributes. This flexibility makes it easier to adapt and evolve your data model as your application requirements change over time.
  • Simple querying and indexing: Firestore offers powerful querying capabilities that allow you to retrieve data based on various criteria. You can query data using equality filters, range filters, sorting, and even complex compound queries. Firestore automatically indexes your data, making queries efficient and performant.

Source