Name: Enable Realtime Only for Individual Tables using supabase_realtime
Uploaded: 2021-08-02T13:43:12-05:00
Description: In this lesson, we'll look at patterns for enabling real-time on individual tables using the supabase_realtime publication function.

Create a New Supabase Project

Navigate the Supabase Admin Interface

Create PostgreSQL Tables Using Supabase's Interface

Configure Supabase Auth to Allow Users to Login with GitHub

Use Triggers to Automatically Update Supabase Tables

Set up a Supabase Client in Next.js

Set up a Login Page in Next.js with Supabase's auth.session()

Set up GitHub Authorization with Supabase

Manage Third-Party Authorization Errors in Supabase

Executing Raw SQL using Supabase's Interface

Retrieve Data with a Supabase API Request

Subscribe to Database Changes using Supabase's Realtime Client

Enable Realtime Only for Individual Tables using supabase_realtime

Insert Submitted Data to Supabase Tables

Keep Track of the Current User Using Next.js with Supabase

Logout and Update Users with React and Supabase's upsert Method

Request User Details for a Given User Using Supabase's API

Retrieve and Displaying User Details with User Subscriptions

Deploy a Supabase Application to Production with Cloudflare Pages

Building Supabase Serverless Workflows with Cloudflare Workers

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

In this lesson, we'll look at patterns for enabling real-time on individual tables using the supabase_realtime publication function. 

https://app.egghead.io/api/v1/lessons/javascript-enable-realtime-only-for-individual-tables-using-supabase_realtime/subtitles

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.

Enable Realtime Only for Individual Tables using supabase_realtime

Share this video with your friends

Course

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js