How to create a logical AND with pagination in Angular Firestore

Question

I have a collection of products in my firestore database. I want the user to be able to filter these products on fields such as color, type and brand. Each product contains a value for each of these fields.

Currently, I've attempted to use the where query to return the collection on the values that would be selected by a user (which works), however I want to implement infinite scoll / pagination so I can limit the number of reads done at once.

My code attempt:

  return this.db
  .collection("products", (ref) =>
    ref.where('productName', '==', 'sofa').orderBy('productName').startAfter(lastSeen).limit(batchSize)
  )
  .snapshotChanges();

This code of course returns an error as you cannot combine the where with an orderBy / startAfter query.

My question is, how can I adapt this code to use multiple equality where's (I want exact matches, hence not using 'array-contains') that would also allow me to use orderBy so I can add the infinite scroll / limit the number of results.

Jose V Jose V · Accepted Answer · 2020-07-15T09:54:04

It seems that this is not currently supported for angularfire2.

However, I was able to run the following sample successfully in a testing app using the default Firestore Web Client Library:

db.collection('cities')
.where('country','==', "USA")
.where('capital','==', true)
.orderBy("population")
.startAfter(100000)
.limit(2)
.get()

How to create a logical AND with pagination in Angular Firestore

1 Answers