Subscribing to database changes in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What event triggers the callback in this Supabase subscription?

Consider this code snippet subscribing to a Supabase table:

const subscription = supabase
  .from('messages')
  .on('INSERT', payload => {
    console.log('New message:', payload.new);
  })
  .subscribe()

Which event will cause the callback to run?

Supabase

const subscription = supabase
  .from('messages')
  .on('INSERT', payload => {
    console.log('New message:', payload.new);
  })
  .subscribe()

A When a row in the 'messages' table is updated

B When a new row is added to the 'messages' table

C When a row in the 'messages' table is deleted

D When the 'messages' table schema changes

💡 Hint

Think about what 'INSERT' means in database terms.

The 'INSERT' event triggers when a new row is added to the table. The callback receives the new row data.

❓ Configuration

intermediate

Which code correctly unsubscribes from a Supabase real-time subscription?

You have a subscription object from Supabase. How do you properly stop listening to database changes?

Supabase

const subscription = supabase
  .from('orders')
  .on('UPDATE', payload => {
    console.log('Order updated:', payload.new);
  })
  .subscribe()

// What code unsubscribes correctly?

A subscription.unsubscribe()

B subscription.remove()

C supabase.removeSubscription(subscription)

D supabase.unsubscribe(subscription)

💡 Hint

Check Supabase docs for the method to remove subscriptions.

Supabase uses removeSubscription(subscription) to stop listening and clean up the subscription.

❓ Architecture

advanced

What is the best architecture to handle high-frequency database changes with Supabase subscriptions?

You expect thousands of database changes per minute. Which architecture helps handle this efficiently?

A Use multiple clients each subscribing to a subset of tables or filters to distribute load

B Subscribe only to schema changes to reduce event volume

C Poll the database every few seconds instead of using subscriptions

D Use a single client subscribing to all changes and process events sequentially

💡 Hint

Think about distributing workload to avoid bottlenecks.

Multiple clients subscribing to filtered subsets distribute load and improve scalability.

❓ security

advanced

Which Supabase feature ensures only authorized users receive database change events?

You want to make sure users only get real-time updates for data they are allowed to see. Which feature helps enforce this?

A Row Level Security (RLS) policies on the database

B Client-side filtering of subscription events

C Using HTTPS instead of HTTP for subscriptions

D Encrypting subscription payloads manually

💡 Hint

Think about database-level access control.

Row Level Security (RLS) policies restrict which rows a user can access, including in real-time subscriptions.

✅ Best Practice

expert

What is the recommended way to handle reconnection logic for Supabase real-time subscriptions in a web app?

Your app loses internet connection and then reconnects. How should you handle the subscription to avoid missing events?

A Do nothing; Supabase handles reconnection internally without developer action

B Keep the old subscription active and hope it catches up

C Reload the entire web page to reset subscriptions

D Automatically resubscribe on connection restore and fetch missed data via a separate query

💡 Hint

Consider how to avoid missing events during disconnects.

Resubscribing and fetching missed data ensures no events are lost during connection drops.

Practice

1. What does subscribing to database changes in Supabase help your app do?

easy

A. Keep app data live and updated automatically

B. Manually refresh data by reloading the page

C. Store data permanently on the client device

D. Encrypt data before sending to the database

Solution

1. Step 1: Understand the purpose of subscriptions

   Subscriptions listen for database changes and update the app data live.

2. Step 2: Compare options with subscription benefits

   Only Keep app data live and updated automatically describes automatic live updates, matching subscription behavior.

3. Final Answer:

   Keep app data live and updated automatically -> Option A

4. Quick Check:

   Subscriptions = live data updates [OK]

Hint: Subscriptions keep data live without manual refresh [OK]

Common Mistakes:

• Thinking subscriptions store data locally
• Confusing subscriptions with manual refresh
• Assuming subscriptions encrypt data

2. Which of the following is the correct syntax to subscribe to INSERT events on the 'messages' table in Supabase?

easy

A. supabase.from('messages').on('UPDATE', callback).subscribe()

B. supabase.from('messages').on('INSERT', callback).subscribe()

C. supabase.table('messages').listen('INSERT', callback).subscribe()

D. supabase.listen('messages').on('INSERT', callback).subscribe()

Solution

1. Step 1: Recall correct Supabase subscription syntax

   The correct method is supabase.from('table').on('EVENT', callback).subscribe().

2. Step 2: Match syntax to options

   supabase.from('messages').on('INSERT', callback).subscribe() matches this syntax with 'messages' and 'INSERT' event.

3. Final Answer:

   supabase.from('messages').on('INSERT', callback).subscribe() -> Option B

4. Quick Check:

   Correct syntax = supabase.from('messages').on('INSERT', callback).subscribe() [OK]

Hint: Use .from('table').on('EVENT', callback).subscribe() [OK]

Common Mistakes:

• Using .table() instead of .from()
• Listening to wrong event type
• Incorrect method chaining order

3. Given the code below, what will be logged when a new row is inserted into the 'tasks' table?

supabase.from('tasks').on('INSERT', payload => {
  console.log('New task:', payload.new);
}).subscribe()

medium

A. New task: undefined

B. No output because subscription is missing

C. Error: callback not defined

D. New task: [object Object] with new row data

Solution

1. Step 1: Understand the callback payload on INSERT

   The payload contains a 'new' property with the inserted row data as an object.

2. Step 2: Analyze console.log output

   Logging 'New task:' plus payload.new prints the object as '[object Object]' in console.

3. Final Answer:

   New task: [object Object] with new row data -> Option D

4. Quick Check:

   Payload.new logs inserted row object [OK]

Hint: payload.new holds inserted row data object [OK]

Common Mistakes:

• Expecting payload.new to be undefined
• Confusing payload.new with payload.old
• Assuming subscription needs extra setup to log

4. What is wrong with this subscription code?

const subscription = supabase.from('orders').on('DELETE', () => {
  console.log('Order deleted');
})

medium

A. Missing .subscribe() call to activate subscription

B. Wrong event type; should be 'REMOVE' instead of 'DELETE'

C. Callback function must receive a payload parameter

D. Subscription must be assigned to a variable named 'sub'

Solution

1. Step 1: Check subscription activation

   The .subscribe() method is required to start listening to events.

2. Step 2: Verify event type and callback

   'DELETE' is a valid event, and callback can omit payload if unused.

3. Final Answer:

   Missing .subscribe() call to activate subscription -> Option A

4. Quick Check:

   Always call .subscribe() to activate [OK]

Hint: Always end with .subscribe() to start listening [OK]

Common Mistakes:

• Forgetting .subscribe() call
• Using wrong event names
• Thinking callback must have parameters

5. You want to subscribe to both INSERT and UPDATE events on the 'profiles' table and log the changed row each time. Which code correctly achieves this?

hard

A. supabase.from('profiles').on('INSERT,UPDATE', payload => console.log(payload.new)).subscribe()

B. supabase.from('profiles').on(['INSERT', 'UPDATE'], payload => console.log(payload.new)).subscribe()

C. supabase.from('profiles').on('INSERT', payload => console.log(payload.new)).on('UPDATE', payload => console.log(payload.new)).subscribe()

D. supabase.from('profiles').on('INSERT').on('UPDATE', payload => console.log(payload.new)).subscribe()

Solution

1. Step 1: Understand event subscription chaining

   Supabase allows chaining .on() calls for different events before .subscribe().

2. Step 2: Evaluate each option's syntax

   supabase.from('profiles').on('INSERT', payload => console.log(payload.new)).on('UPDATE', payload => console.log(payload.new)).subscribe() chains .on('INSERT', ...).on('UPDATE', ...) correctly; others use invalid event formats.

3. Final Answer:

   supabase.from('profiles').on('INSERT', payload => console.log(payload.new)).on('UPDATE', payload => console.log(payload.new)).subscribe() -> Option C

4. Quick Check:

   Chain .on() for multiple events [OK]

Hint: Chain .on() calls for each event before .subscribe() [OK]

Common Mistakes:

• Trying to pass multiple events as array or comma string
• Calling .subscribe() too early
• Not chaining .on() properly