Cursor-based pagination (startAfter, endBefore) in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the query after the last document.

Firebase

query = collectionRef.orderBy('timestamp').[1](lastDoc)

Drag options to blanks, or click blank then click option'

AstartAfter

BstartAt

CendBefore

DendAt

Attempts:

3 left

💡 Hint

Common Mistakes

Using startAt instead of startAfter causes the query to include the last document again.

Using endBefore or endAt will limit the query to documents before the cursor.

The startAfter method tells Firestore to begin the query after the specified document, enabling cursor-based pagination.

2fill in blank

medium

Complete the code to end the query before the first document.

Firebase

query = collectionRef.orderBy('timestamp').[1](firstDoc)

Drag options to blanks, or click blank then click option'

AstartAfter

BstartAt

CendBefore

DendAt

Attempts:

3 left

💡 Hint

Common Mistakes

Using endAt includes the document, which is not desired here.

Using startAfter or startAt affects the start of the query, not the end.

The endBefore method tells Firestore to end the query before the specified document, useful for backward pagination.

3fill in blank

hard

Fix the error in the code to correctly paginate starting after a document.

Firebase

query = collectionRef.orderBy('timestamp').[1](lastDoc)

Drag options to blanks, or click blank then click option'

AstartAt

BendAt

CendBefore

DstartAfter

Attempts:

3 left

💡 Hint

Common Mistakes

Passing only the document ID instead of the document snapshot.

Using startAt instead of startAfter causes duplicate results.

The startAfter method requires the full document snapshot or field values, not just the document ID.

Passing lastDoc.id is incorrect; you should pass lastDoc itself.

4fill in blank

hard

Fill both blanks to paginate between two cursors correctly.

Firebase

query = collectionRef.orderBy('timestamp').[1](startDoc).[2](endDoc)

Drag options to blanks, or click blank then click option'

AstartAfter

BstartAt

CendBefore

DendAt

Attempts:

3 left

💡 Hint

Common Mistakes

Using startAt or endAt includes the cursor documents, causing overlap.

Reversing the order of methods causes unexpected results.

Use startAfter to begin after the start cursor and endBefore to end before the end cursor for precise pagination.

5fill in blank

hard

Fill all three blanks to create a paginated query with limit and cursors.

Firebase

query = collectionRef.orderBy('timestamp').[1](cursorDoc).limit([2]).[3]()

Drag options to blanks, or click blank then click option'

AstartAfter

B10

Cget

Dlimit

Attempts:

3 left

💡 Hint

Common Mistakes

Using limit() twice or missing the get() call.

Passing a string instead of a number to limit().

This code starts after the cursor document, limits results to 10, and fetches the documents with get().

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