Realtime filters in Supabase - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a realtime filter in Supabase?

A realtime filter in Supabase lets you listen to specific changes in your database by filtering events, so you only get updates you care about.

beginner

How do realtime filters improve app performance?

They reduce unnecessary data by only sending relevant updates, which saves bandwidth and speeds up your app.

intermediate

Which Supabase client method is used to apply realtime filters?

The `.on()` method with a `filter` option in the configuration object is used to listen to specific changes with filters.

intermediate

Give an example of a realtime filter condition in Supabase.

Example: `filter: 'user_id=eq.123'` listens only to changes where the user_id equals 123.

beginner

Why should you use realtime filters instead of listening to all changes?

Using filters avoids overload by limiting data to what your app needs, making it more efficient and responsive.

What does a realtime filter in Supabase do?

A Deletes old data automatically

B Creates backups of the database

C Encrypts data in realtime

D Limits updates to specific data changes

Realtime filters limit updates to only the data changes you want to listen to.

Which method is used to listen for realtime changes with filters in Supabase?

A .on()

B .filter()

C .subscribe()

D .listen()

The .on() method is used to listen for realtime changes using a `filter` option to apply filters.

What is the benefit of using realtime filters?

A Improved database security

B More data stored in the database

C Faster data updates and less bandwidth use

D Automatic data cleaning

Realtime filters reduce data sent, making updates faster and saving bandwidth.

Which filter condition listens for changes where 'status' equals 'active'?

A status=neq.active

B status=eq.active

C status=gt.active

D status=lt.active

The 'eq' operator means equals, so 'status=eq.active' listens for status equal to active.

What happens if you do not use realtime filters?

A You get all database changes, which can slow your app

B You get no updates at all

C Your data is automatically filtered by Supabase

D Your database stops working

Without filters, you receive all changes, which can overload your app with unnecessary data.

Explain how realtime filters work in Supabase and why they are useful.

Think about how filtering updates helps your app stay fast and efficient.

Describe how to set up a realtime filter for a user ID in Supabase.

Focus on the method and filter syntax to listen for one user's data.

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