Pagination patterns in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch the first 10 rows from the 'products' table.

Supabase

const { data, error } = await supabase.from('products').select('*').limit([1]);

Drag options to blanks, or click blank then click option'

A50

B5

C20

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number too large or too small for the page size.

Forgetting to use the limit method.

Using limit(10) fetches the first 10 rows, which is a common page size for pagination.

2fill in blank

medium

Complete the code to fetch the next 10 rows after skipping the first 10.

Supabase

const { data, error } = await supabase.from('products').select('*').range([1], 19);

Drag options to blanks, or click blank then click option'

A9

B0

C10

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Starting range at 0 instead of 10.

Using incorrect end index.

The range(10, 19) fetches rows starting from index 10 to 19, which is the second page of 10 rows.

3fill in blank

hard

Fix the error in the code to fetch the next page using a cursor with 'id' greater than the last fetched id.

Supabase

const { data, error } = await supabase.from('products').select('*').gt('id', [1]).limit(10);

Drag options to blanks, or click blank then click option'

Alast_id

BlastId

C'last_id'

D'lastId'

Attempts:

3 left

💡 Hint

Common Mistakes

Putting variable names inside quotes, making them strings.

Using incorrect variable names.

The variable lastId should be used without quotes to refer to its value, not as a string.

4fill in blank

hard

Fill both blanks to fetch the third page of 10 rows using range pagination.

Supabase

const { data, error } = await supabase.from('orders').select('*').range([1], [2]);

Drag options to blanks, or click blank then click option'

A20

B19

C29

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong start or end indexes.

Confusing zero-based indexing.

The third page starts at index 20 and ends at 29 for 10 rows per page.

5fill in blank

hard

Fill all three blanks to fetch rows where 'created_at' is after a date, ordered by 'created_at' descending, limited to 5 rows.

Supabase

const { data, error } = await supabase.from('events').select('*').[1]('created_at', 'gt', lastDate).[2]('created_at', { ascending: false }).limit([3]);

Drag options to blanks, or click blank then click option'

Agt

Border

C5

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using gt directly without filter.

Forgetting to order results.

Setting wrong limit number.

Use filter('created_at', 'gt', date) to filter dates after a value, then order('created_at', { ascending: false }) to sort descending, and limit(5) to get 5 rows.