Realtime filters in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to subscribe to realtime updates on the 'messages' table.

Supabase

const subscription = supabase.channel('public:messages').on('postgres_changes', { event: 'INSERT', schema: 'public', table: '[1]' }, payload => { console.log('New message:', payload.new); }).subscribe();

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

Acomments

Busers

Cmessages

Dprofiles

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong table name like 'users' or 'comments' will not trigger updates for messages.

The subscription listens to inserts on the 'messages' table, so the table name must be 'messages'.

2fill in blank

medium

Complete the code to filter realtime updates to only rows where 'user_id' equals '123'.

Supabase

const subscription = supabase.channel('public:messages').on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'messages', filter: 'user_id=eq.[1]' }, payload => { console.log('Updated message:', payload.new); }).subscribe();

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

A456

B123

C789

Dabc

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong user ID will cause no updates to be received.

The filter uses 'user_id=eq.123' to listen only for updates where user_id is 123.

3fill in blank

hard

Fix the error in the filter syntax to listen for deletes where 'status' is 'archived'.

Supabase

const subscription = supabase.channel('public:files').on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'files', filter: 'status=eq.[1]' }, payload => { console.log('Deleted file:', payload.old); }).subscribe();

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

Aeq

Bequals

C=

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' or '=' causes the filter to fail and no updates are received.

The correct filter syntax uses 'eq' for equality in Supabase realtime filters.

4fill in blank

hard

Fill both blanks to subscribe to inserts on 'orders' where 'amount' is greater than 100.

Supabase

const subscription = supabase.channel('public:orders').on('postgres_changes', { event: '[1]', schema: 'public', table: 'orders', filter: 'amount=[2].100' }, payload => { console.log('Large order:', payload.new); }).subscribe();

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

AINSERT

BUPDATE

Cgt

Dlt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'UPDATE' event will not catch new orders.

Using 'lt' will filter smaller amounts, not larger.

The event is 'INSERT' to listen for new orders, and the filter uses 'gt' to get amounts greater than 100.

5fill in blank

hard

Fill all three blanks to subscribe to updates on 'tasks' where 'priority' equals 'high' and 'completed' is false.

Supabase

const subscription = supabase.channel('public:tasks').on('postgres_changes', { event: '[1]', schema: 'public', table: 'tasks', filter: 'priority=eq.[2]&completed=eq.[3]' }, payload => { console.log('High priority incomplete task:', payload.new); }).subscribe();

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

AUPDATE

Bhigh

Cfalse

DINSERT

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'INSERT' event misses updates.

Using wrong filter values causes no matching updates.

The event is 'UPDATE' to listen for changes, 'priority' filter is 'high', and 'completed' filter is 'false' to get incomplete tasks.

Practice

1.

What is the main purpose of using realtime filters in Supabase?

easy

A. To encrypt data before sending it over the network

B. To speed up the initial data load by caching all data locally

C. To automatically backup your database in real time

D. To receive updates only for specific data changes you care about

Solution

1. Step 1: Understand the purpose of realtime filters

   Realtime filters let you watch only the data you want by filtering updates.

2. Step 2: Identify the correct purpose among options

   Only To receive updates only for specific data changes you care about describes receiving updates for specific data changes, which matches the purpose.

3. Final Answer:

   To receive updates only for specific data changes you care about -> Option D

4. Quick Check:

   Realtime filters = selective updates [OK]

Hint: Realtime filters = watch only needed data updates [OK]

Common Mistakes:

• Thinking filters speed up initial load by caching
• Confusing filters with backup or encryption features
• Assuming filters encrypt data automatically

2.

Which of the following is the correct syntax to filter realtime updates for rows where status equals 'active'?

supabase.from('tasks').on('INSERT', callback).filter(...)

easy

A. .match({status: 'active'})

B. .eq('status', 'active')

C. .where('status', 'active')

D. .filter('status', 'active')

Solution

1. Step 1: Recall Supabase realtime filter syntax

   Supabase uses .match({column: value}) to filter equality in realtime subscriptions.

2. Step 2: Match syntax with options

   Only .match({status: 'active'}) uses .match({status: 'active'}), which is correct syntax.

3. Final Answer:

   .match({status: 'active'}) -> Option A

4. Quick Check:

   .match({}) filters equality in Supabase [OK]

Hint: Use .match({column: value}) for equality filters [OK]

Common Mistakes:

• Using .filter() which is not a Supabase method
• Confusing .where() with SQL but not valid here
• Using .eq() which is for data queries, not realtime subscriptions

3.

Given the code below, what data will the callback receive?

supabase
  .from('messages')
  .on('UPDATE', payload => console.log(payload.new))
  .match({room_id: 5})
  .subscribe()

medium

A. All updated messages from any room

B. Only updated messages where room_id is 5

C. Only new messages inserted in room 5

D. All messages regardless of room_id

Solution

1. Step 1: Analyze the subscription filter

   The code filters updates with .match({room_id: 5}), so only updates where room_id equals 5 are included.

2. Step 2: Understand event type and filter effect

   The event is 'UPDATE', so only updated rows matching the filter trigger the callback.

3. Final Answer:

   Only updated messages where room_id is 5 -> Option B

4. Quick Check:

   Filter + UPDATE event = updates for room 5 only [OK]

Hint: Filter + event type limits callback data [OK]

Common Mistakes:

• Thinking it includes inserts instead of updates
• Ignoring the .match filter on room_id
• Assuming all rooms trigger callback

4.

What is wrong with this Supabase realtime subscription code?

const subscription = supabase
  .from('orders')
  .on('INSERT', payload => console.log(payload))
  .match({status: 'pending'})
  .subscribe()

// Later in code
subscription.unsubscribe()

medium

A. The .subscribe() method does not exist in Supabase realtime API

B. You must call .unsubscribe() on the Supabase client, not subscription

C. The unsubscribe call is correct; no error here

D. The .match() filter is placed after .on(), causing a syntax error

Solution

1. Step 1: Check method chaining order

   Supabase allows chaining .from(), .on(), filters like .match(), then .subscribe() correctly.

2. Step 2: Verify unsubscribe usage

   The subscription object returned by .subscribe() has an unsubscribe() method to stop listening.

3. Final Answer:

   The unsubscribe call is correct; no error here -> Option C

4. Quick Check:

   Correct chaining and unsubscribe usage [OK]

Hint: Unsubscribe from subscription object, not client [OK]

Common Mistakes:

• Thinking .match() must come before .on()
• Trying to unsubscribe from client instead of subscription
• Believing .subscribe() is invalid in Supabase

5.

You want to listen to realtime updates for tasks where priority is either 'high' or 'urgent'. Which approach correctly sets up this filter?

hard

A. Use two separate subscriptions with .match({priority: 'high'}) and .match({priority: 'urgent'})

B. Use .or('priority.eq.high,priority.eq.urgent') in a single subscription

C. Use .in('priority', ['high', 'urgent']) to filter both in one subscription

D. Use .match({priority: 'high'}).match({priority: 'urgent'}) chained together

Solution

1. Step 1: Understand filtering multiple values

   Supabase realtime supports .match({col: val}) for equality. No IN or OR for multiple values on the same column in one subscription.

2. Step 2: Evaluate options for multiple priorities

   Two separate subscriptions allow filtering each priority correctly and efficiently.

3. Step 3: Why other options fail

   B uses invalid .or syntax. C has no .in method. D chaining .match contradicts (cannot match both values).

4. Final Answer:

   Use two separate subscriptions with .match({priority: 'high'}) and .match({priority: 'urgent'}) -> Option A

5. Quick Check:

   Multiple values on same column need multiple subscriptions [OK]

Hint: Use separate subscriptions for multiple values on same column [OK]

Common Mistakes:

• Trying to chain multiple .match() filters on same column
• Using invalid .or() syntax for Supabase realtime
• Trying to use .in() like in queries, not supported in realtime