Subscribe to Database Changes using Supabase's Realtime Client
In this lesson, we'll improve on our simple API request to Supabase by turning it into a subscription: a live-updating query that automatically subscribes to any new or changed data in our database.
Kristian Freeman: [0:00] We've made it possible for our user interface to get a list of messages from Supabase's API and show them on the screen by mapping through them in this return call here. Indeed, if we look here on localhost:3001 at our locally running next application and refresh, here is our new Hello message shown directly from the API.
[0:22] One thing the Supabase excels at is not just this sort of traditional make a request and see the data that comes back. It's also possible to do subscriptions. If we come back here into our API section and go to message, you can see that this is the read rose that we did here earlier, but there is also the section called subscribe to changes.
[0:44] This is really incredible. You can subscribe to any changes here, including all events. When there's any change at all to a message table, get this function that allows you to look at what the change is. There's also inserts when there's a new change received, when there's a message that's deleted, etc.
[1:06] Now, it's worth mentioning that at the time of recording, Supabase does recommend that you only use the subscriptions on a server-side application. The reason for this is that there is no authentication at the moment for when a application should receive these new subscription events.
[1:25] For instance, maybe a message changes and not all users need to or should see that update. There is no possible way for filtering these out right now. Though, as it says here, we're building advanced auth, so you can use real time streams from anywhere. This is a thing that's being planned in the future.
[1:43] Just a heads-up, you probably don't want to use subscriptions like this in a production application until you have better real-time authorization because this information will go to every single client using your application, even if they're not supposed to see all of the data that's being passed through this subscription.
[2:00] For now, as a way of learning how subscriptions work, we will walk through and understand how it works. I just wanted to give that caveat is something you should know. The way that this works is that we can do a subscribe to all events or a subscribe to insert, subscribe to updates. You have this Supabase from the message table.
[2:20] Then we have this .on, which allows us to provide what the event we want to listen to is, in this case, insert or update or for all of them will say *. Then we have this function, which has a payload that is representing what the change is that you can act on inside of this callback function. Then, finally, we have this .subscribe function which is what subscribes to that change event.
[2:48] We're going to copy this code in. We want to look for inserts right now. That is when a new message is created in our database. Then we want to do something inside of our local application so we can see when changes occur.
[3:03] Back in our code, let's create a new function called set-up messages subscription and this is an async function, where we will paste in this code. Again, I'll save it to Autoformat. Now, I have this subscription set up.
[3:18] I'm going to remove this reference to this message variable and instead I'm just going to say await that will await this promise which is returned from subscribe and make sure that it completes before the function is considered done.
[3:29] Then below that I'll just say, await setup messages subscription, and that will run the function after it gets these initial messages from the database. Now if I open up my UI again and I refresh, you can see that there doesn't seem to be anything down here.
[3:47] That's because the subscription has been set up but there isn't any new messages. We can test this by making another message here in our Table Editor. Again, I'll right click this Copy Cell Content for this user ID.
[4:02] Then I'll make another message called, "Hello again," and paste in the user ID. Even after we've updated our message, there isn't a update here in the console. There's no console log with the payload or anything that we would expect.
[4:15] The reason for this is that we need to enable the replication settings for telling Supabase to when a message changed, send an update to its real-time functionality which is what powers Supabase subscription.