Subscribing to database changes in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to subscribe to changes on the 'messages' table.

Supabase

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

Drag options to blanks, or click blank then click option'

Apayload.old

Bpayload.data

Cpayload.new

Dpayload.insert

Attempts:

3 left

💡 Hint

Common Mistakes

Using payload.old which is for DELETE or UPDATE events.

Using payload.data which is not a valid property.

The payload.new contains the new row data after an INSERT event.

2fill in blank

medium

Complete the code to listen for UPDATE events on the 'profiles' table.

Supabase

const subscription = supabase.from('profiles').on('[1]', payload => {
  console.log('Profile updated:', payload.new);
}).subscribe();

Drag options to blanks, or click blank then click option'

AUPDATE

BDELETE

CINSERT

DCHANGE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CHANGE' which is not a valid event type.

Using 'DELETE' or 'INSERT' which listen to other events.

The event type for updates is UPDATE.

3fill in blank

hard

Fix the error in the subscription code to correctly unsubscribe.

Supabase

subscription.[1]();

Drag options to blanks, or click blank then click option'

Acancel

Bremove

Cstop

Dunsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'remove' or 'stop' which are not valid methods.

Using 'cancel' which does not exist on the subscription object.

The correct method to stop listening is unsubscribe().

4fill in blank

hard

Fill both blanks to subscribe to DELETE events on 'orders' and log the old data.

Supabase

const subscription = supabase.from('orders').on('[1]', payload => {
  console.log('Deleted order:', payload.[2]);
}).subscribe();

Drag options to blanks, or click blank then click option'

ADELETE

Bnew

Cold

DINSERT

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' instead of 'old' for DELETE events.

Using 'INSERT' event type which is incorrect here.

For DELETE events, the old row data is in payload.old.

5fill in blank

hard

Fill all three blanks to subscribe to all changes on 'tasks' and log the event type and new data.

Supabase

const subscription = supabase.from('tasks').on('[1]', payload => {
  console.log('Event:', payload.[2]);
  console.log('Data:', payload.[3]);
}).subscribe();

Drag options to blanks, or click blank then click option'

AINSERT

BeventType

Cnew

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'INSERT' instead of '*' to listen to all events.

Logging 'payload.old' instead of 'payload.new' for new data.

Using * subscribes to all event types. The event type is in payload.eventType and new data in payload.new.

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