Firebase Multi-Property Filtering: 4 Advanced Techniques for SQL-Like Queries

Introduction

Filtering data effectively is crucial when working with Firebase. While Firebase provides querying capabilities, filtering by multiple properties simultaneously can be challenging. This blog post explores four different techniques to achieve SQL-like WHERE clause functionality in your Firebase applications, enabling you to filter data based on multiple criteria.

1. Client-Side Filtering with Lodash

The most straightforward approach is client-side filtering. This involves retrieving the entire dataset from Firebase and then applying filter logic on the client. While simple to implement, it's crucial to remember the main drawback: the entire collection must be loaded into memory, which can be a performance bottleneck for large datasets.

Using AngularFire2, you would typically use queries that return a Firebase list observable and then pass a query to sort by a certain value. For multiple values, use client-side filtering. The code example below demonstrates setting up a basic filtering system using Lodash, specifically the filter and conforms functions.

First import necessary libraries.

    import { AngularFireDatabase } from '@angular/fire/compat/database';
    import * as _ from 'lodash';
    

Define the data variables. animals will hold the full dataset and filteredAnimals will hold the results of applying filters.

    animals: any[];
    filteredAnimals: any[];
    activeFilters: any = {}; // Object to keep track of active filters
    

The following is an example of a filter function.

    filterExact(property: string, rule: any) {
      this.activeFilters[property] = (item) => item[property] === rule;
      this.applyFilters();
    }

    applyFilters() {
      this.filteredAnimals = _.filter(this.animals, _.conforms(this.activeFilters));
    }
    

HTML example of a filter.

        <select [(ngModel)]="family" (change)="filterExact('family', family)">
            <option value="bird">Bird</option>
            <option value="mammal">Mammal</option>
        </select>
    

2. Composite Keys

Composite keys involve combining multiple key-value pairs into a single key-value pair. This allows you to indirectly query for multiple properties at once. However, this approach becomes unwieldy beyond three properties due to the explosion of possible key combinations.

For example, if you wanted to filter by `family` and `endangered`, you might create a key like `family_endangered` with values like `bird_true`, `mammal_false`, etc. Then, you can query based on these combined keys using standard Firebase queries.

There is also an experimental library called "querybase" that automates this.

3. Tag Filtering

Tag filtering involves denormalizing your data to associate items with specific tags. This allows you to retrieve all items associated with a tag and combine them to achieve multi-property filtering. You can use the intersection or union of tag keys and then query for individual items. Lodash can again be useful, specifically the intersection helper.

4. Leveraging Third-Party Services (Algolia/Elasticsearch)

For complex filtering requirements and large datasets, consider outsourcing data indexing and filtering to third-party services like Algolia or Elasticsearch. These services are designed for high-performance searching and filtering, offering advanced capabilities beyond Firebase's native features. Data indexing is a high-maintenance process, so explore third-party providers first.

Conclusion

Filtering data based on multiple properties in Firebase requires careful consideration of your data size and filtering complexity. Client-side filtering is suitable for smaller datasets, while composite keys and tag filtering offer alternative approaches for specific scenarios. For the most demanding use cases, third-party services like Algolia or Elasticsearch provide robust and scalable solutions.

Keywords: Firebase Filtering, AngularFire2, Lodash, Composite Keys, Algolia