Realtime filters in Supabase - Mini Project: Build & Apply

Realtime filters

📖 Scenario: You are building a chat application using Supabase. You want to listen to new messages in realtime but only for a specific chat room.

🎯 Goal: Create a realtime subscription in Supabase that listens only to new messages where the room_id matches a specific value.

📋 What You'll Learn

Create a variable called room_id with the value 42.

Create a Supabase realtime subscription on the messages table.

Add a filter to the subscription to listen only for inserts where room_id equals the variable room_id.

Start the subscription and assign it to a variable called subscription.

💡 Why This Matters

🌍 Real World

Realtime filters help apps listen only to relevant data changes, reducing unnecessary data and improving performance.

💼 Career

Understanding realtime filters is important for building efficient, scalable cloud applications that respond instantly to data changes.

1

Set the room_id variable

Create a variable called room_id and set it to the number 42.

Supabase

# Create a variable called room_id and set it to 42
# Your code here

Hint

Use const room_id = 42; to create the variable.

2

Create a Supabase realtime subscription

Create a realtime subscription on the messages table using supabase. Assign the subscription to a variable called subscription. Do not add filters yet.

Supabase

const room_id = 42;
// Create a realtime subscription on 'messages' and assign to 'subscription'
// Your code here

Hint

Use supabase.channel('public:messages').on('postgres_changes', ...).subscribe().

3

Add a filter for room_id

Modify the subscription to add a filter so it only listens to inserts where room_id equals the variable room_id. Use the filter property in the on method options.

Supabase

const room_id = 42;
const subscription = supabase
  .channel('public:messages')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `room_id=eq.${room_id}` }, payload => {
    // handle new message
  })
  .subscribe();
// Your code here

Hint

Add filter: `room_id=eq.${room_id}` inside the on method options.

4

Complete the subscription setup

Ensure the subscription is started by calling .subscribe() and assigned to the variable subscription. The subscription should listen only to new messages with room_id equal to 42.

Supabase

const room_id = 42;
const subscription = supabase
  .channel('public:messages')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `room_id=eq.${room_id}` }, payload => {
    // handle new message
  })
  .subscribe();
// Your code here

Hint

Make sure .subscribe() is called and the result is assigned to subscription.

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