Handling Realtime Events: Inserts, Updates, and Deletes | Realtime Subscriptions for Dynamic Applications | Supabase Made Easy: Your First Steps to Building with Open Source Firebase Alternative

Supabase's realtime capabilities allow your application to react instantly to changes in your database. This is crucial for building dynamic, engaging user experiences where data is constantly evolving. Whether it's live chat, collaborative editing, or real-time dashboards, Supabase makes it straightforward to subscribe to and handle these events.

The core of Supabase realtime is its subscription system. You can subscribe to specific tables and listen for different types of database events. The three primary events you'll commonly handle are INSERT, UPDATE, and DELETE.

Let's imagine we have a messages table in our Supabase database. We want our chat application to display new messages as soon as they are sent, update message statuses (like 'read'), and remove deleted messages.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

// Subscribe to inserts in the messages table
const channel = supabase.channel('messages_channel', {
  config: {
    presence: {
      key: 'uniqueUserId'
    }
  }
})
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'messages',
  }, (payload) => {
    console.log('New message inserted:', payload.new)
    // Here, you'd update your UI to display the new message
  })
  .subscribe()

// To unsubscribe when the component unmounts or is no longer needed:
// supabase.removeChannel(channel);

In the code above, we create a new channel named messages_channel. We then use the .on() method to listen for postgres_changes. We specify that we are interested in INSERT events from the messages table in the public schema. The callback function receives a payload object. The payload.new property contains the full new row that was inserted.

Now, let's extend this to handle UPDATE events. For instance, if a message status changes from 'sending' to 'sent' or 'read'.

const channel = supabase.channel('messages_channel', {
  config: {
    presence: {
      key: 'uniqueUserId'
    }
  }
})
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'messages',
  }, (payload) => {
    console.log('New message inserted:', payload.new)
    // Update UI for new message
  })
  .on('postgres_changes', {
    event: 'UPDATE',
    schema: 'public',
    table: 'messages',
  }, (payload) => {
    console.log('Message updated:', payload.new)
    // Here, you'd find the message in your UI and update its properties (e.g., status)
  })
  .subscribe()