Realtime filters in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

Understanding Realtime Filter Behavior in Supabase

You have a Supabase realtime subscription on the 'orders' table with the filter: .eq('status', 'pending'). What will happen if a new order with status 'completed' is inserted?

Supabase

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

A The subscription callback will NOT trigger because the new order status is 'completed'.

B The subscription will trigger only if the order status changes later to 'pending'.

C The subscription will throw an error because 'completed' is not a valid filter value.

D The subscription callback will trigger and log the new order regardless of status.

💡 Hint

Realtime filters only send events matching the filter condition.

The filter '.eq('status', 'pending')' means only events where status is 'pending' will trigger the callback. Since the new order is 'completed', it does not match and no event is sent.

❓ Configuration

intermediate

Correctly Applying Multiple Filters in Supabase Realtime

You want to listen for updates on the 'messages' table where 'room_id' is 5 and 'read' is false. Which subscription filter is correct?

A .from('messages:room_id=eq.5&read=eq.false')

B .from('messages:room_id=eq.5,read=eq.false')

C .from('messages:room_id=eq.5|read=eq.false')

D .from('messages:room_id=eq.5;read=eq.false')

💡 Hint

Multiple filters are separated by commas in Supabase realtime channel filters.

Supabase uses commas to separate multiple filter conditions in realtime subscriptions. Using '&', '|', or ';' is invalid syntax.

❓ Architecture

advanced

Designing Efficient Realtime Filters for High Traffic Tables

You have a high-traffic 'transactions' table with millions of rows. You want to minimize bandwidth and client processing by only receiving realtime events for transactions with 'amount' greater than 1000. Which approach is best?

A Create a database view with only transactions > 1000 and subscribe to realtime on that view.

B Subscribe to all transactions and filter on the client side for amount > 1000.

C Use a realtime subscription with filter '.gt('amount', 1000)' to receive only matching events.

D Use a cron job to poll the database every minute for transactions > 1000.

💡 Hint

Realtime filters reduce data sent over the network by filtering at the source.

Using a realtime subscription with a filter '.gt('amount', 1000)' ensures only relevant events are sent to the client, reducing bandwidth and processing. Client-side filtering or polling is less efficient.

❓ security

advanced

Security Implications of Realtime Filters in Supabase

You have a realtime subscription on the 'user_data' table filtered by '.eq('user_id', currentUserId)'. What security risk exists if the filter is not applied correctly on the server side?

A The server will block all realtime events, causing no data to be sent.

B The subscription will fail to connect due to invalid filter syntax.

C There is no risk because filters are always enforced on the client side.

D Clients may receive data for other users, exposing private information.

💡 Hint

Filters must be enforced on the server to prevent unauthorized data access.

If filters are only applied on the client side, malicious users can bypass them and receive data for other users. Proper server-side RLS (Row Level Security) and filter enforcement is required.

✅ Best Practice

expert

Optimizing Realtime Filter Usage for Scalability

Your app subscribes to multiple realtime channels with complex filters on large tables. What is the best practice to maintain scalability and reduce server load?

A Use precise server-side filters to minimize events sent and batch updates when possible.

B Limit the number of realtime subscriptions per client and use broad filters combined with client-side filtering.

C Subscribe to all changes and rely on client-side filtering to reduce server complexity.

D Disable realtime subscriptions and use frequent polling instead.

💡 Hint

Efficient filtering at the source reduces unnecessary data transmission and processing.

Using precise server-side filters reduces the volume of events sent to clients, lowering server load and improving scalability. Batching updates also helps. Client-side filtering or polling increases load and latency.

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