Realtime filters in Supabase - Step-by-Step Execution

Process Flow - Realtime filters

Client subscribes to Realtime channel

↓

Client sends filter criteria

↓

Server applies filter to data stream

↓

Only matching data events sent to client

↓

Client receives filtered realtime updates

The client subscribes with filters; the server sends only matching realtime data events back.

Execution Sample

Supabase

const channel = supabase
  .channel('public:messages')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'messages', filter: 'user_id=eq.42' }, payload => {
    console.log('Filtered update:', payload)
  })
  .subscribe()

Subscribe to realtime updates on 'messages' table where user_id equals 42.

Process Table

Step	Action	Filter Applied	Data Event	Sent to Client
1	Subscribe to channel with filter user_id=42	user_id=eq.42	N/A	No data yet
2	New message inserted with user_id=42	user_id=eq.42	{id:1, user_id:42, text:'Hi'}	Yes, sent
3	New message inserted with user_id=7	user_id=eq.42	{id:2, user_id:7, text:'Hello'}	No, filtered out
4	Message updated with user_id=42	user_id=eq.42	{id:1, user_id:42, text:'Hi again'}	Yes, sent
5	Message deleted with user_id=7	user_id=eq.42	{id:2, user_id:7}	No, filtered out
6	Message deleted with user_id=42	user_id=eq.42	{id:1, user_id:42}	Yes, sent
7	No more events	user_id=eq.42	N/A	Subscription active, waiting
8	Client unsubscribes	user_id=eq.42	N/A	No more data sent

💡 Client unsubscribes or connection closes, stopping realtime updates.

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
subscription_status	not subscribed	subscribed	subscribed	subscribed	subscribed	subscribed	unsubscribed
last_received_event	none	{id:1,user_id:42,text:'Hi'}	{id:1,user_id:42,text:'Hi'}	{id:1,user_id:42,text:'Hi again'}	{id:1,user_id:42,text:'Hi again'}	{id:1,user_id:42}	none

Key Moments - 3 Insights

Why does the client not receive messages with user_id 7?

Because the filter 'user_id=eq.42' only allows events where user_id equals 42, as shown in execution_table rows 3 and 5.

What happens when a message with user_id 42 is updated?

The updated event passes the filter and is sent to the client, as seen in execution_table row 4.

Does the subscription keep sending data after client unsubscribes?

No, after unsubscribing (row 8), no more data is sent to the client.

Visual Quiz - 3 Questions

Look at the execution_table, what data event is sent to the client at step 2?

A {id:1, user_id:42, text:'Hi'}

B {id:2, user_id:7, text:'Hello'}

C {id:1, user_id:42, text:'Hi again'}

D No data sent

💡 Hint

Check execution_table row 2 under 'Data Event' and 'Sent to Client' columns.

At which step does the client stop receiving any data?

A Step 7

B Step 8

C Step 6

D Step 5

💡 Hint

Look at execution_table row 8 where client unsubscribes.

If the filter changed to 'user_id=eq.7', which step's event would be sent to the client?

A Step 2 event

B Step 4 event

C Step 3 event

D Step 6 event

💡 Hint

Refer to execution_table rows 2 and 3 for user_id values and filter effect.

Concept Snapshot

Realtime filters in Supabase:
- Subscribe to a channel with a filter condition.
- Server sends only data events matching the filter.
- Client receives filtered realtime updates.
- Unsubscribe to stop receiving data.
- Filters reduce unnecessary data traffic.

Full Transcript

Realtime filters let clients subscribe to only the data they want. The client sends a filter when subscribing. The server checks each data event against the filter. Only matching events are sent back. For example, subscribing to messages where user_id equals 42 means only those messages are received. Events with other user_ids are ignored. When the client unsubscribes, no more data is sent. This saves bandwidth and processing on the client side.

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