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().