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.

Practice

1. What does the .range(from, to) method do in Supabase pagination?

easy

A. It sorts the rows between from and to indexes.

B. It limits the total number of rows returned to to.

C. It fetches rows starting from index from up to index to inclusive.

D. It skips the first from rows and returns the rest.

Solution

1. Step 1: Understand the purpose of .range(from, to)

   This method is used to select a slice of rows by index, starting at from and ending at to, inclusive.

2. Step 2: Compare options with this behavior

   Only the option stating 'It fetches rows starting from index from up to index to inclusive.' correctly describes the slicing behavior. The other options describe sorting, limiting, or skipping incorrectly.

3. Final Answer:

   It fetches rows starting from index from up to index to inclusive. -> Option C

4. Quick Check:

   .range(from, to) = fetch rows from-to inclusive [OK]

Hint: Remember range is inclusive from start to end index [OK]

Common Mistakes:

• Thinking to is exclusive
• Confusing .range with .limit
• Assuming it skips rows instead of slicing

2. Which of the following is the correct syntax to fetch page 3 with 10 items per page using Supabase's .range()?

easy

A. .range(20, 29)

B. .range(30, 39)

C. .range(21, 30)

D. .range(10, 19)

Solution

1. Step 1: Calculate start and end indexes for page 3

   Page 3 means items 21 to 30 (1-based). Since .range() uses 0-based indexes, start = (3-1)*10 = 20, end = 20 + 9 = 29.

2. Step 2: Match calculated range with options

   .range(20, 29) matches the correct 0-based slice for page 3.

3. Final Answer:

   .range(20, 29) -> Option A

4. Quick Check:

   Page 3 with 10 items = indexes 20 to 29 [OK]

Hint: Page N with size S starts at (N-1)*S [OK]

Common Mistakes:

• Using 1-based indexes directly
• Off-by-one errors in start or end
• Confusing page number with item count

3. Given this Supabase query:

const page = 2;
const pageSize = 5;
const { data } = await supabase
  .from('products')
  .select('*')
  .range((page - 1) * pageSize, page * pageSize - 1);

How many rows will data contain?

medium

A. 6

B. 10

C. 4

D. 5

Solution

1. Step 1: Calculate the range indexes

   For page 2 and pageSize 5, start = (2-1)*5 = 5, end = 2*5 - 1 = 9.

2. Step 2: Determine number of rows fetched

   Indexes 5 to 9 inclusive means 5 rows (5,6,7,8,9).

3. Final Answer:

   5 -> Option D

4. Quick Check:

   Range length = end - start + 1 = 5 [OK]

Hint: Count rows as end - start + 1 [OK]

Common Mistakes:

• Counting end index as exclusive
• Miscalculating start or end
• Assuming pageSize is ignored

4. You wrote this code to fetch page 1 with 10 items per page:

const page = 1;
const pageSize = 10;
const { data } = await supabase
  .from('orders')
  .select('*')
  .range(page * pageSize, (page + 1) * pageSize - 1);

Why does this return no rows?

medium

A. Because .range() requires the start index to be less than the end index.

B. Because the range starts at 10 instead of 0, skipping the first page.

C. Because pageSize must be 0 for the first page.

D. Because .select('*') must be called after .range().

Solution

1. Step 1: Analyze the range calculation

   For page 1 and pageSize 10, start = 1*10 = 10, end = (1+1)*10 - 1 = 19. This skips rows 0 to 9.

2. Step 2: Understand why no rows appear

   If the table has fewer than 11 rows or you want the first page, you must start at 0. Starting at 10 skips the first 10 rows.

3. Final Answer:

   Because the range starts at 10 instead of 0, skipping the first page. -> Option B

4. Quick Check:

   Page 1 start index = 0, not 10 [OK]

Hint: Page 1 starts at index 0, not page * pageSize [OK]

Common Mistakes:

• Starting range at page * pageSize instead of (page-1)*pageSize
• Misunderstanding zero-based indexing
• Incorrect order of method calls

5. You want to implement infinite scrolling with Supabase pagination. Which approach correctly fetches the next page of 15 items after receiving the first page?

hard

A. Use .range(0, 14) for first page, then .range(15, 29) for second page.

B. Use .range(1, 15) for first page, then .range(16, 30) for second page.

C. Use .range(0, 15) for first page, then .range(15, 30) for second page.

D. Use .range(0, 14) for first page, then .range(14, 29) for second page.

Solution

1. Step 1: Define correct zero-based ranges for pages

   For 15 items per page, first page is indexes 0 to 14 (15 items). Second page starts at 15 and ends at 29.

2. Step 2: Match options with correct ranges

   The option using .range(0, 14) for first page, then .range(15, 29) for second page is correct. It avoids off-by-one errors or overlaps present in the others.

3. Final Answer:

   Use .range(0, 14) for first page, then .range(15, 29) for second page. -> Option A

4. Quick Check:

   Pages must not overlap and cover all items [OK]

Hint: Next page starts at previous end + 1 [OK]

Common Mistakes:

• Overlapping ranges causing duplicate items
• Off-by-one errors in start or end indexes
• Starting second page at wrong index