Supabase's real-time capabilities are a powerful feature that allows developers to receive instant updates whenever there are changes in the database. Leveraging PostgreSQL's Pub/Sub functionality, Supabase makes it easy to implement real-time communication between the server and the client.

When a change occurs in the Supabase database, such as an insert, update, or delete operation, Supabase emits real-time events. These events are then delivered to connected clients in real time, ensuring that the application's user interface remains up-to-date without the need for manual refreshes.

In a Next.js application, for instance, you can subscribe to real-time events using the Supabase client. Here's a brief example:

import { useEffect, useState } from 'react';
import { supabase } from '../path-to-supabase';

export default function Home() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetch initial data
    const fetchData = async () => {
      try {
        const { data, error } = await supabase
          .from('users')
          .select('id, name, email');

        if (error) {
          throw error;
        }

        setUsers(data);
      } catch (error) {
        console.error('Error fetching data:', error.message);
      }
    };

    // Subscribe to real-time changes
    const subscription = supabase
      .from('users')
      .on('*', () => fetchData())
      .subscribe();

    fetchData();

    // Cleanup subscription on component unmount
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{`${user.name} - ${user.email}`}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, the on('*') method is used to subscribe to changes on all tables. Whenever a change occurs in the 'users' table, the fetchData() function is called to update the user interface with the latest data. This ensures that your application stays in sync with the real-time changes happening in the Supabase database.

In today's programming world, real-time data handling has become essential. This article aims to guide readers through the process of implementing real-time updates in applications using Superbase, a powerful open-source Firebase alternative. The focus will be on how to add and delete data from a Superbase instance and reflect these changes in the application immediately.

The first step towards real-time updates is creating a Superbase channel. Superbase uses Phoenix channels behind the scenes, allowing developers to create a 'room' and start listening for channel events.

Below is an example of how to create a Superbase channel:

---
title: Realtime Database Changes
privateVideoUrl: https://stream.mux.com/3hJzDmK4b9WCeM8HILZwWifuZL4Kbi4pK1NIdkot1ms.m3u8
isPublicLesson: true
---

Supabase's real-time capabilities are a powerful feature that allows developers to receive instant updates whenever there are changes in the database. Leveraging PostgreSQL's Pub/Sub functionality, Supabase makes it easy to implement real-time communication between the server and the client.

When a change occurs in the Supabase database, such as an insert, update, or delete operation, Supabase emits real-time events. These events are then delivered to connected clients in real time, ensuring that the application's user interface remains up-to-date without the need for manual refreshes.

In a Next.js application, for instance, you can subscribe to real-time events using the Supabase client. Here's a brief example:

```javascript
import { useEffect, useState } from 'react';
import { supabase } from '../path-to-supabase';

export default function Home() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetch initial data
    const fetchData = async () => {
      try {
        const { data, error } = await supabase
          .from('users')
          .select('id, name, email');

        if (error) {
          throw error;
        }

        setUsers(data);
      } catch (error) {
        console.error('Error fetching data:', error.message);
      }
    };

    // Subscribe to real-time changes
    const subscription = supabase
      .from('users')
      .on('*', () => fetchData())
      .subscribe();

    fetchData();

    // Cleanup subscription on component unmount
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{`${user.name} - ${user.email}`}</li>
        ))}
      </ul>
    </div>
  );
}
```

In this example, the on('\*') method is used to subscribe to changes on all tables. Whenever a change occurs in the 'users' table, the fetchData() function is called to update the user interface with the latest data. This ensures that your application stays in sync with the real-time changes happening in the Supabase database.

Malith

Realtime Database Changes

And now what we want to do is whenever we add a story to Superbase and we want

So to do this, we need to go to our client component called Story.

And in here, we need to create a use effect first.

So basically, Superbase is using Phoenix channels that are behind the scenes

a channel so you can create the room and then start watching for these channels

So what we are going to do here is first of all, we need to create an import

and a Superbase, start a Superbase instance again and simply can do this.

And in a use effect, what we need to do is create a channel.

Either you can call this story or you can also keep it like this.

And I want to see in any channel and whenever there is a Proscratch change on

So here you can check the Scratch change.

So in here, we can do the second parameter and also we can listen to all the

And then on the payload, this is where we need to do something.

If we are inserting something, we get the event type insert.

If you delete it something, we are getting event type delete.

So for now, what we want to do is check for the event type.

So whenever there is a new story in the database table and then we can, we are

So what we are going to do is at the end of this, we need to say.subscribe.

Here we need to pass another parameter, set the stories.

So two dependencies, super base and set the stories.

So now whenever we enter something, it should right away reflect on our app.

Where you add, it will reflect right away.

So if you want to debug also, you can debug in your network.

So if you go back, we have on delete already, but it is also a lock.

So we can use that ID to delete any story.

You can say from stories, delete if the ID matches.

So basically, I would say instead of match, you can say like this.

And if that value is matches our ID, it will delete.

So let me go back and I delete this and delete this and delete this and delete

If you go to database, everything is deleted.

So now if I refresh here, everything is deleted.

So what we want to do is when you click add, now it reflects right away.

But when you click on delete, it should reflect right away.

So to do that also here, just like we did for the insert.

But here what we need to do is we need to filter what story we deleted.

So with delete and all payload ID is equal to the story ID that we have here.

And if we add a new one, we reflect another one and we click on delete to

Yes, this already we are using super best real time.

And what we need to work on next is start sharing with another person.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript