Cursor-based pagination (startAfter, endBefore) in Firebase - Mini Project: Build & Apply

Cursor-based pagination (startAfter, endBefore)

📖 Scenario: You are building a simple app that shows a list of books stored in a Firebase Firestore database. The list can be very long, so you want to show only a few books at a time and let users move forward or backward through the list.

🎯 Goal: Create a Firestore query that fetches books in pages of 3 items using cursor-based pagination with startAfter and endBefore methods.

📋 What You'll Learn

Create a Firestore collection reference called booksRef pointing to the 'books' collection.

Create a query to fetch the first 3 books ordered by the field title.

Add a variable lastVisible to store the last document snapshot from the current page.

Create a query to fetch the next 3 books using startAfter(lastVisible).

Create a query to fetch the previous 3 books using endBefore(firstVisible).

💡 Why This Matters

🌍 Real World

Cursor-based pagination is used in apps to efficiently load large lists of data without overwhelming the user or the database.

💼 Career

Understanding Firestore pagination is important for building scalable cloud applications that handle data smoothly.

1

Set up Firestore collection reference

Create a Firestore collection reference called booksRef that points to the 'books' collection.

Firebase

# Your code here

Hint

Use firestore.collection('books') to get the collection reference.

2

Create initial query for first page

Create a query called firstPageQuery that fetches the first 3 books ordered by the title field.

Firebase

const booksRef = firestore.collection('books');
# Your code here

Hint

Use orderBy('title') and limit(3) on booksRef.

3

Add variable to store last visible document

Create a variable called lastVisible to store the last document snapshot from the current page.

Firebase

const booksRef = firestore.collection('books');
const firstPageQuery = booksRef.orderBy('title').limit(3);
# Your code here

Hint

Initialize lastVisible with null before fetching data.

4

Create queries for next and previous pages

Create two queries: nextPageQuery that fetches the next 3 books using startAfter(lastVisible), and prevPageQuery that fetches the previous 3 books using endBefore(firstVisible). Assume firstVisible is the first document snapshot of the current page.

Firebase

const booksRef = firestore.collection('books');
const firstPageQuery = booksRef.orderBy('title').limit(3);
let lastVisible = null;
# Your code here

Hint

Use startAfter(lastVisible) for next page and endBefore(firstVisible) for previous page queries.

Practice

1. What does the startAfter method do in Firebase cursor-based pagination?

easy

A. It loads all documents from the beginning.

B. It ends the query before a specific document snapshot.

C. It deletes documents after a specific snapshot.

D. It starts loading documents after a specific document snapshot.

Solution

1. Step 1: Understand the purpose of startAfter

   startAfter tells Firebase to begin loading documents after the given document snapshot, skipping that snapshot itself.

2. Step 2: Compare with other cursor methods

   endBefore stops before a snapshot, but startAfter moves forward after it.

3. Final Answer:

   It starts loading documents after a specific document snapshot. -> Option D

4. Quick Check:

   startAfter = start after snapshot [OK]

Hint: Remember: startAfter skips the given document and moves forward [OK]

Common Mistakes:

• Confusing startAfter with endBefore
• Thinking startAfter includes the given document
• Assuming startAfter loads all documents from start

2. Which of the following is the correct syntax to start a query after a document snapshot named lastDoc in Firebase?

easy

A. query.startAfter(lastDoc)

B. query.endAfter(lastDoc)

C. query.startBefore(lastDoc)

D. query.endBefore(lastDoc)

Solution

1. Step 1: Recall Firebase query cursor methods

   The correct method to start after a document is startAfter().

2. Step 2: Match method with snapshot variable

   Using startAfter(lastDoc) correctly applies the cursor after the lastDoc snapshot.

3. Final Answer:

   query.startAfter(lastDoc) -> Option A

4. Quick Check:

   Correct method is startAfter() [OK]

Hint: Use startAfter(snapshot) to move forward in pagination [OK]

Common Mistakes:

• Using non-existent methods like endAfter or startBefore
• Mixing up startAfter and endBefore
• Forgetting to pass the snapshot as argument

3. Given the following code snippet, what documents will be returned?

const firstPage = await collection.orderBy('name').limit(3).get();
const nextPage = await collection.orderBy('name').startAfter(firstPage.docs[2]).limit(3).get();

medium

A. Documents 1 to 3 on firstPage, documents 4 to 6 on nextPage

B. Documents 1 to 3 on firstPage, documents 3 to 5 on nextPage

C. Documents 1 to 2 on firstPage, documents 3 to 5 on nextPage

D. Documents 1 to 3 on firstPage, documents 1 to 3 again on nextPage

Solution

1. Step 1: Understand firstPage query

   The first query orders by 'name' and limits to 3 documents, so it returns documents 1, 2, and 3.

2. Step 2: Understand nextPage query with startAfter

   Using startAfter(firstPage.docs[2]) starts after the third document, so nextPage returns documents 4, 5, and 6.

3. Final Answer:

   Documents 1 to 3 on firstPage, documents 4 to 6 on nextPage -> Option A

4. Quick Check:

   startAfter skips last doc, nextPage continues [OK]

Hint: startAfter skips last doc, next page continues from next doc [OK]

Common Mistakes:

• Assuming startAfter includes the last document again
• Confusing document indexes (0-based vs 1-based)
• Not ordering consistently before pagination

4. You wrote this code but it throws an error:

const prevPage = await collection.orderBy('date').endBefore(lastDoc).limitToLast(3).get();

What is the likely cause?

medium

A. Using limitToLast without endBefore causes error

B. You must use startAfter instead of endBefore

C. The lastDoc snapshot is not from the same query order

D. Firebase does not support endBefore with limitToLast

Solution

1. Step 1: Check cursor snapshot origin

   The snapshot lastDoc must come from a query with the same ordering and filters.

2. Step 2: Understand error cause

   If lastDoc is from a different query or unordered, Firebase throws an error.

3. Final Answer:

   The lastDoc snapshot is not from the same query order -> Option C

4. Quick Check:

   Cursor snapshot must match query order [OK]

Hint: Cursor snapshot must come from same ordered query [OK]

Common Mistakes:

• Using snapshot from different query or order
• Mixing startAfter and endBefore incorrectly
• Ignoring need for consistent ordering

5. You want to implement backward pagination to load previous 5 documents before a known document snapshot currentDoc. Which Firebase query correctly achieves this?

hard

A. collection.orderBy('timestamp').startAfter(currentDoc).limit(5)

B. collection.orderBy('timestamp').endBefore(currentDoc).limitToLast(5)

C. collection.orderBy('timestamp').startAt(currentDoc).limit(5)

D. collection.orderBy('timestamp').endAt(currentDoc).limitToLast(5)

Solution

1. Step 1: Understand backward pagination

   To load documents before currentDoc, use endBefore(currentDoc).

2. Step 2: Use limitToLast for correct order

   Using limitToLast(5) returns the last 5 documents before currentDoc in correct order.

3. Final Answer:

   collection.orderBy('timestamp').endBefore(currentDoc).limitToLast(5) -> Option B

4. Quick Check:

   Backward pagination uses endBefore + limitToLast [OK]

Hint: Backward pagination = endBefore + limitToLast [OK]

Common Mistakes:

• Using startAfter for backward pagination
• Using limit instead of limitToLast when going backward
• Confusing endBefore with endAt