Enable Realtime Only for Individual Tables using supabase_realtime

Kristian Freeman: [0:00] All you need to do here is to update our real-time publication in the database in order to allow for real-time updates to message and to user.

[0:10] Here, in the database section of the Supabase documentation, they have instructions here on how this works. Basically, we're going to drop this Supabase real-time publication if it already exists and then create a new one, and we are also going to alter the publication to add these tables to them, so products or posts.

[0:31] Then, finally, it says, by default, only new values are sent, but if you want to receive the old record, that is previous values whenever you update or delete a record, you can update the replica identity of your tables sending it to full.

[0:45] For each table, we will, instead of just sending what the new values are, maybe, we want to send everything, for instance, basically, an entire representation of our user, or of our message, back to this publication.

[1:00] What we're going to do is we're going to copy all of this code here. I'm going to come back into the SQL view here. I'm going to make a new query and I'm going to call it real time publication, and I'm going to paste this code in.

[1:15] First, drop the publication if it exists and then create a new one. Then, I'm going to add two tables here. I'm going to delete these comments here. I'm going to say, ultra publication, Supabse real time, add table public.message and public.user and then I'm also going to take this code for altering the table replica identity.

[1:40] Underneath each of these, I'm going to say alter table public.message replica identity full, alter table public user replica identity full. I'll run this. You can see it says success. No rows returned.

[1:59] Let's come back here at our table editor. I'm going to refresh this UI for good measure. Then, if I make a change here, like adding an exclamation point of a couple to hello again, you can see that I get this change received, schema public table message.

[2:15] Here we go, this is our new change coming live from Supabase's real time API. Now, if I come in here and look at the payload, we can get a sense of how the structure of this looks. We have old, which is the previous message content hello again. Then, we have new, which is the content with all of the exclamation points.

[2:37] You'll remember, while testing, we just wanted to make sure that we can see any events here, right? What we really care about is not updates, though, in the future if you're building a real production application, you may very well care about this. For now, in our application, we just care about inserts. What I'm going to do is I'm going to change this to on insert.

[2:59] I'm going to save this. It will reload with the new message here. Then what I want to do is just make a new message. Again, copy cell content for my user ID, create a new row, hello for the third time, and then paste in my user ID here.

[3:17] Now, if I open this back up, you can see in my console change received object. This is my new object, hello for the third time. We know that when an insert comes in, we want to look for this new object and we probably want to add this to our messages table.

[3:34] To do that, I'm going to replace this console log statement here with set messages. Again, we're going to call set messages like we did up here. What I'm going to do is inside of that, I'm going to make a new array. I'm going to say array.concat.

[3:50] Inside of array.concat, first, I'll put my old messages, which is just a list of all of the messages so far. Then I'll also pass in payload.new, which will represent our new message. You see it automatically refreshes here. Hello. Hello again. Hello for the third time.

[4:10] Now, if I come back here and I say, insert new row, is this real time? Then pass in my user ID, press Save. You can see that, is this real time? It was added to our application. I've added a new message, but you may notice that there seems to be a little bit of a glitch.

[4:30] If I refresh the page. Hello. Hello again. Hello for the third time. Is this real time? Let's add one more message here, maybe something like testing. Then I say user ID, pass that in here and save. Well, now you can see it says, testing. It's just erased everything. What?

[4:47] Why is it doing that? What's going on? The reason for this is that if we come back to our code, sent messages is a little interesting in that sometimes it doesn't know what messages is here. Sometimes this is up-to-date. Sometimes it isn't up to date.

[5:02] The solution for this is a modified version of this set messages call which uses a function. This function has a single argument which is basically previous.

[5:14] What we can do is instead of using messages, which comes from all the way up here, we can use previous which is always going to be up-to-date with the previous messages inside of this useState hook.

[5:27] Now, if I refresh the page, you can see all of these messages here. Let's do one more final test where I say, "OK, this works for real." Pass in the user ID and save.

[5:40] If I come here, it didn't update, or it didn't replace everything in our array. It correctly took all of our previous messages and our new message and combined them together for a real-time always up-to-date listing of all of our messages.