Cursor-based pagination (startAfter, endBefore) in Firebase - Step-by-Step Execution

Process Flow - Cursor-based pagination (startAfter, endBefore)

Start Query

↓

Set Cursor: startAfter or endBefore

↓

Fetch limited items

↓

Return page of results

↓

User requests next/prev page

↓

Update cursor with last/first item

↩Back to Fetch limited items

The query starts with a cursor (startAfter or endBefore) to fetch a limited page of results. The cursor updates with each page to navigate forward or backward.

Execution Sample

Firebase

query = collection.orderBy('timestamp').startAfter(lastDoc).limit(3)
results = query.get()
lastDoc = results[-1]

Fetch 3 items after the last document's timestamp to get the next page.

Process Table

Step	Action	Cursor Used	Documents Fetched	Cursor Updated
1	Initial query without cursor	None	Doc1, Doc2, Doc3	Cursor set to Doc3
2	Next page query with startAfter Doc3	startAfter Doc3	Doc4, Doc5, Doc6	Cursor set to Doc6
3	Next page query with startAfter Doc6	startAfter Doc6	Doc7, Doc8	Cursor set to Doc8
4	Next page query with startAfter Doc8	startAfter Doc8	No documents	Cursor unchanged
5	User requests previous page with endBefore Doc4	endBefore Doc4	Doc1, Doc2, Doc3	Cursor set to Doc1
6	User requests previous page with endBefore Doc1	endBefore Doc1	No documents	Cursor unchanged

💡 No more documents to fetch; pagination ends.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
cursor	None	Doc3	Doc6	Doc8	Doc8	Doc1	Doc1
fetched_docs	[]	[Doc1, Doc2, Doc3]	[Doc4, Doc5, Doc6]	[Doc7, Doc8]	[]	[Doc1, Doc2, Doc3]	[]

Key Moments - 3 Insights

Why does the cursor update to the last document after fetching a page?

Because the cursor marks the position to start the next query after the last fetched document, as shown in steps 1-3 in the execution_table.

What happens when there are no more documents after the cursor?

The query returns no documents and the cursor does not update, as seen in step 4 and step 6 in the execution_table.

How does endBefore help in fetching previous pages?

endBefore sets the cursor before a document to fetch documents before it, enabling backward pagination, demonstrated in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the cursor after step 2?

A Doc6

B Doc8

C Doc3

D None

💡 Hint

Check the 'Cursor Updated' column in row for step 2.

At which step does the query return no documents because there are no more after the cursor?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'No documents' in the 'Documents Fetched' column.

If the user wants to go back to the first page, which cursor method is used according to the table?

A startAfter

B limit

C endBefore

D orderBy

💡 Hint

See step 5 where previous page is requested.

Concept Snapshot

Cursor-based pagination uses a document snapshot as a cursor.
startAfter fetches documents after the cursor.
endBefore fetches documents before the cursor.
Use limit() to control page size.
Update cursor each page to navigate.
No documents means end of pagination.

Full Transcript

Cursor-based pagination in Firebase uses document snapshots as cursors to fetch pages of data. The startAfter cursor fetches documents after a given document, while endBefore fetches documents before it. Each query uses limit() to control how many documents to fetch per page. After fetching, the cursor updates to the last or first document to enable navigation to next or previous pages. When no documents are returned, it means the end or start of the data is reached. This method is efficient and reliable for paginating large datasets.