Complex queries with Cloud Firestore

In this codelab, you'll enhance a restaurant recommendation web app powered by Cloud Firestore.

Prerequisites

Basic to intermediate programming knowledge
Part 1 of this series, Getting started with Cloud Firestore

What you'll learn

Write complex Cloud Firestore queries
Deploy indexes

What you'll build

Enhancements for our previously built restaurant recommendation app

What you'll need

Before starting this codelab, make sure that you've installed the following:

npm, which typically comes with Node.js (Node.js version 8 is recommended.)
The IDE or text editor of your choice, such as WebStorm, Atom, VS Code, or Sublime

Currently, your app displays a list of restaurants, but there's no way for the user to filter based on their needs. In this section, you'll use Cloud Firestore's advanced querying to enable filtering.

Here's an example of a simple query to fetch all restaurants in a category:

var filteredQuery = query.where('category', '==', 'Dim Sum')

As its name implies, the where() method makes the query return only members of the collection whose fields meets the specified restrictions. In this case, the query returns only restaurants where category is Dim Sum.

In your app, the user can chain multiple filters to create specific queries, like "Pizza in San Francisco" or "Seafood in Los Angeles ordered by popularity".

You'll create a method that builds up a query that filters restaurants based on multiple criteria selected by the user.

Go back to the file scripts/FriendlyEats.Data.js.
Find the function FriendlyEats.prototype.getFilteredRestaurants.
Replace the entire function with the following code:

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

This code adds multiple where filters and a single orderBy clause to build a compound query based on user input.

Refresh the FriendlyEats app in your browser, and then verify that you can filter by price, city, and category. While testing, you'll see errors in the JavaScript console of your browser that look like this:

The query requires an index. You can create it here: https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

These errors are because Cloud Firestore requires indexes for most compound queries. Requiring indexes on queries keeps Cloud Firestore fast at scale.

Opening the link from the error message automatically opens the index creation UI in the Firebase console with the correct parameters filled in. In the next section, you'll write and deploy the indexes needed for this application.

If you don't want to explore every path in your app and follow each of the index creation links, you can deploy many indexes at once using the Firebase CLI.

In your app's downloaded local directory, find the firestore.indexes.json file.

This file describes all of the indexes needed for all of the possible combinations of filters.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}

Deploy these indexes with the following command:

firebase deploy --only firestore:indexes

After a few minutes, your indexes will be live and the error messages will go away.