Issues with server side pagination of Firestore

💬 Queries and Resources
, ,
2

Hey @Adrien_G!

This may be an issue with trying to reference timestamps in Firebase (see this thread for more detail), I'm seeing similar errors when trying to use a timestamp as a cursor for pagination. Based on that thread it looks like the only solution might be to use raw queries which would also mean setting up custom pagination with something like this.

The following seems to work as a Firebase query that'll pull back paginated data:

const TIMESTAMP_KEY = "timestamp"
const COLLECTION_NAME = "myFirestoreCollection"

const data = []
const cursor = cursors.value[page.value - 2] || null
await db
  .firestore()
  .collection(COLLECTION_NAME)
  .orderBy(TIMESTAMP_KEY)
  .startAfter(firestore.Timestamp.fromDate(new Date(cursor)))
  .limit(pageSize.value)
  .get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      const values = doc.data()
      data.push({
        ...values,
        [TIMESTAMP_KEY]: values[TIMESTAMP_KEY]._seconds * 1000,
      })
    })
  })
return data

You can see it working in an app if you import the attached JSON file and hook up your Firebase resource, then replace the values for TIMESTAMP_KEY and COLLECTION_NAME with "created_at" and the name of your collection respectively.

It's a doozy of a workaround :disappointed_relieved: I can let you know here if better handling for Firebase timestamps is included. Also very open to hearing others' approaches here!
firebase_pagination_on_timestamp (1).json