Skip to main content

on().subscribe()

Subscribe to realtime changes in your database.

const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Parameters​

  • eventrequiredSupabaseEventTypes

    The database event which you would like to receive updates for, or you can use the special wildcard * to listen to all changes.

  • callbackrequiredobject

    A callback that will handle the payload that is sent whenever your database changes.

Notes​

  • Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by managing replication.
  • If you want to receive the "previous" data for updates and deletes, you will need to set REPLICA IDENTITY to FULL, like this: ALTER TABLE your_table REPLICA IDENTITY FULL;

Examples​

Listen to all database changes​

const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listening to a specific table​

const mySubscription = supabase
  .from('countries')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listening to inserts​

const mySubscription = supabase
  .from('countries')
  .on('INSERT', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listening to updates​

By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening too: 

alter table "your_table" replica identity full;
const mySubscription = supabase
  .from('countries')
  .on('UPDATE', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listening to deletes​

By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: 

alter table "your_table" replica identity full;
const mySubscription = supabase
  .from('countries')
  .on('DELETE', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

Listening to multiple events​

You can chain listeners if you want to listen to multiple events for each table.

const mySubscription = supabase
  .from('countries')
  .on('INSERT', handleRecordInserted)
  .on('DELETE', handleRecordDeleted)
  .subscribe()

Listening to row level changes​

You can listen to individual rows using the format {table}:{col}=eq.{val} - where {col} is the column name, and {val} is the value which you want to match.

const mySubscription = supabase
  .from('countries:id=eq.200')
  .on('UPDATE', handleRecordUpdated)
  .subscribe()