Let’s explore more about Google Cloud Firestore Pagination in this article. With our Google Cloud Platform Support Services, Bobcares offers solutions to your queries.

What Is Google Cloud Firestore Pagination?

Pagination is the technique of segmenting data into separate pages. In Firestore, we can do this by offsetting the query after ordering a collection by a field and limiting it to a certain page size.

When listening to real-time updates as well, Firestore Pagination can be challenging to implement. Results may move around the screen if the position of the data changes mid-query, which may mislead users. The collections where the anticipated query ordering does not regularly change are the ones for which pagination works best.

How To Set Up Google Cloud Firestore Pagination?

The main steps to carry out the Google Cloud Firestore Pagination are as follows:

1. Initializing pagination

2. Method to move forward

3. Method to move backward

4. Showing the list of pages

Initializing pagination

const field = 'username';
const pageSize = 3;

const query = ref.orderBy(field).limit(pageSize);

Method to move forward

The last document from the current query results is needed for the next page. In order to offset from that document, use the startAfter method.

 function nextPage(last) {

	return ref.orderBy(field)
			  .startAfter(last[field])
			  .limit(pageSize);
  }

Method to move backward

The first document from the current query results must be there in order to return to the previous page. To offset from that document, use the endBefore method followed by limitToLast.

function prevPage(first) {

	return ref.orderBy(field)
			  .endBefore(first[field])
			  .limitToLast(pageSize);
  }

Showing the list of pages

We also need to know how many documents are there in the query in order to display a list of pages. It negates the idea of pagination if we only ask Firestore for the count without reading the complete collection. Let’s look at the options on the serverside pagination.

Serverside Pagination – options

1. With Offest Query Operator: There is a unique operator offset in the Firebase Admin SDK. All paginated queries might be routed through Cloud Function with an offset argument as a parameter.

const admin = require('firebase-admin');

const pageThree = ref.orderBy(field).limit(10).offset(20);

2. By creating a field particularly for pagination: Another alternative is to designate a field solely for pagination. When you have a group of values that grow sequentially by 1, pagination is simpler to manage. The cloud function below assigns the most recent number for a new document after keeping track of the overall count in a metadata document. To avoid conflicts or duplicates, the process is carried out as a transaction.code

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

const db = admin.firestore();

exports.keepCount = functions.firestore
  .document('customers/{customerId}')
  .onCreate((snapshot, context) => { 

    return db.runTransaction(async transaction => {

        // Get the metadata and incement the count. 
        const metaRef = db.doc('metadata/customers');
        const metaData = ( await transaction.get( metaRef ) ).data();

        const number = metaData.count + 1;

        transaction.update(metaRef, { 
            count: number 
        });

        // Update Customer
        const customerRef = snapshot.ref;
        
        transaction.set(customerRef, { 
            number,
        }, 
         { merge: true }
        );


    });

  });

[Looking for a solution to another query? We are just a click away.]

Conclusion

The article provides the steps from our Support team to set up the Google Cloud Firestore Pagination, which typically provides smaller, shorter pages and as a result reduced load times.