Cursor-based pagination (startAfter, endBefore) in Firebase - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is cursor-based pagination in Firebase?

Cursor-based pagination uses a specific document snapshot or field value as a marker to fetch the next set of results, allowing efficient navigation through large datasets.

beginner

What does the startAfter method do in Firebase queries?

startAfter tells Firebase to return documents after the given cursor, excluding the cursor itself, to fetch the next page of results.

intermediate

How does endBefore differ from startAfter in Firebase pagination?

endBefore returns documents before the given cursor, excluding the cursor, useful for fetching previous pages in reverse order.

intermediate

Why is cursor-based pagination preferred over offset-based pagination in Firebase?

Cursor-based pagination is faster and more reliable because it uses document snapshots or values as markers, avoiding performance issues and inconsistencies caused by skipping documents.

beginner

What is required to use startAfter or endBefore in a Firebase query?

You need a valid cursor, which can be a document snapshot or a field value from a previous query result, to mark where to start or end the next query.

What does startAfter do in Firebase pagination?

A Returns all documents ignoring the cursor

B Returns documents starting exactly at the cursor

C Returns documents before the cursor, including it

D Returns documents after the cursor, excluding it

startAfter fetches documents after the cursor, excluding the cursor itself.

Which method would you use to fetch documents before a certain point in Firebase?

A endBefore

B limit

C startAfter

D orderBy

endBefore returns documents before the given cursor.

Why is cursor-based pagination better than offset-based pagination in Firebase?

A It requires no query parameters

B It uses less memory

C It avoids skipping documents and is more efficient

D It loads all documents at once

Cursor-based pagination uses document snapshots or values to avoid skipping and improves query performance.

What can be used as a cursor in Firebase pagination?

A A random number

B A document snapshot

C A collection name

D A query limit

A document snapshot or a field value from a previous query is used as a cursor.

If you want to get the next page of results after a known document, which method should you use?

A startAfter

B orderByDescending

C limitToLast

D endBefore

startAfter fetches documents after the given cursor for the next page.

Explain how cursor-based pagination works in Firebase using startAfter and endBefore.

Think about how you mark your place in a book to continue reading.

Why should you prefer cursor-based pagination over offset-based pagination in Firebase?

Consider how skipping pages in a book might cause confusion.

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