Pagination patterns in Supabase - Step-by-Step Execution

Process Flow - Pagination patterns

Start Query

↓

Set Pagination Parameters

↓

Fetch Page Data

↓

Display Data

↓

User Requests Next/Prev Page?

No→End

Yes↓

Update Pagination Parameters

↩Back to Fetch Page Data

This flow shows how pagination works by fetching data page by page, updating parameters as the user navigates.

Execution Sample

Supabase

const { data, error } = await supabase
  .from('items')
  .select('*')
  .range(0, 9);

Fetches the first 10 items from the 'items' table using Supabase pagination.

Process Table

Step	Action	Pagination Parameters	Data Fetched	Result
1	Start query	range(0, 9)	Items 1 to 10	Display first 10 items
2	User clicks next page	range(10, 19)	Items 11 to 20	Display next 10 items
3	User clicks next page	range(20, 29)	Items 21 to 30	Display next 10 items
4	User clicks previous page	range(10, 19)	Items 11 to 20	Display previous 10 items
5	User clicks last page	range(90, 99)	Items 91 to 100	Display last 10 items
6	User clicks next page	range(100, 109)	No items	No more data, stop pagination

💡 No more data available after last page, pagination ends.

Status Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
rangeStart	0	10	20	10	90	100	100
rangeEnd	9	19	29	19	99	109	109
currentPage	1	2	3	2	10	11	11
dataFetched	Items 1-10	Items 11-20	Items 21-30	Items 11-20	Items 91-100	No items	No items

Key Moments - 3 Insights

Why does the dataFetched show 'No items' at the last step?

Because the range requested goes beyond available data, so Supabase returns an empty result, as shown in execution_table step 6.

Why do rangeStart and rangeEnd change when user clicks next or previous?

They define the slice of data to fetch for each page, updating to fetch the correct items as user navigates, as seen in execution_table steps 2-4.

What happens if the user tries to go before the first page?

The pagination parameters would not update to negative ranges, so the query stays at the first page, preventing invalid data fetch.

Visual Quiz - 3 Questions

Look at the execution_table, what is the rangeStart value after the user clicks next page the second time?

A 20

B 10

C 30

D 19

💡 Hint

Check execution_table row 3 under Pagination Parameters.

At which step does the pagination stop because no more data is available?

A Step 4

B Step 6

C Step 5

D Step 3

💡 Hint

Look for 'No more data' in the Result column of execution_table.

If the user clicks previous page from step 3, what will be the dataFetched value?

A Items 21 to 30

B Items 1 to 10

C Items 11 to 20

D No items

💡 Hint

Refer to execution_table step 4 for previous page data.

Concept Snapshot

Pagination in Supabase uses .range(start, end) to fetch slices of data.
Start with range(0, pageSize-1) for first page.
Update range for next/previous pages by adding/subtracting pageSize.
Stop when no data is returned.
This avoids loading all data at once, improving performance.

Full Transcript

Pagination patterns in Supabase involve fetching data in chunks or pages using the .range() method. The process starts by setting pagination parameters to define which slice of data to fetch, such as range(0, 9) for the first 10 items. When the user requests the next or previous page, these parameters update accordingly to fetch the correct data slice. If the query returns no data, it means the end of available data is reached, and pagination stops. This method helps load data efficiently without overwhelming the system or user interface.