Subscribe to Authenticated Realtime Events with Client Components and the Next.js 13 App Router

I'm going to show you how we can subscribe to real-time events from Super Bass so we can keep our UI in sync with changes to the database now this does require us to have super bass auth configured to use cookies so if you don't know what that means I recommend you click that card above and get it implemented alright let's get into it here I have my beautifully styled to do app that's listing out all of my to-do's and this data is revalidated or updated anytime I sign out and so you'll see I can no longer see any of my to-do's and then if I sign in my to-do's are back I can also add a new to-do to this list like fix typescript definitions which we need to do throughout our application we'll get to that soon but you'll see that new to-do has been added to the list but what if someone else needs to add an item to our list let's say we have a super controlling boss who wants to micromanage Us by adding to two items directly to our list if they were to add a new to do to reply to my email and this one's not yet complete and they assign it to our user now if we go back to our version of this application we're not actually seeing that new to do and it's not going to show up on our list until we revalidate that data so again until we sign out or we add a new to do or we just refresh the page so let's subscribe to those changes in the database so we can update our UI immediately so if we have a look at our application we're fetching those to-do's from Super Bass and then we're iterating over them to display each to do so let's take this rendering logic and we're going to move it to a new component called real time to do's and this is going to take a prop for to Do's which is going to be set to our list of to-do's that we got from Super Bass here and now we need to actually create this component so under app we're going to create a new file called realtime Dash to Do's dot TSX and since we're going to be doing clienty things like subscribing to real-time events this one needs to be a client component so let's add the use space client string at the top of our file and now we can export a default function for real-time to Do's this will take out to Do's prop which we're going to very naughtily set to any but hey I added a to-do to fix our typescript definitions so we'll get to it but for now we just want to return that rendering Logic for how to do's and typescript wants us to commit sins again so let's say this one is any and we need to import our to do component so that's coming in from dot slash to do now we can go back to our page.tsx and import this new component from dot slash Real Time Dash to do's and if we're feeling really good we can remove that unused import for out to do and so now back in the browser this should look exactly the same let's say we replied to that email we can click it and it will disappear from our list and so let's set up that real-time subscription so back over in our real-time to Do's component we're going to need a Super Bass client and so we can create that here by calling the create client component client function which comes in from our auth helpers package we then need a use effect which comes in from react and this is going to take a function which we want to call when our component mounts so we pass it an empty dependency array now in this callback function we want to get a channel from Super Bass by calling Channel and giving it a name this this can be anything so in this case I'm going to call it real time to Do's we then say we want to do something on postgres underscore changes and the naming for this one is important this needs to be postgres underscore changes or lowercase we then give it a configuration object to say what we want to listen for so in this case the event is star so we want to listen to inserts updates and deletes the schema we want to listen to is public and the table is to Do's now we can pass it a callback function which we want to run when this event occurs and so this means something in the database has changed and so essentially we want to go and revalidate our data or essentially in our server component we want to go off to Super Bass and ask for all of the to Do's again and so the way we can do that is with a router so we can get an instance of our router by calling the use router hook which comes in from next slash navigation make sure you're using this navigation one not router and now in our callback function we just want to call router dot refresh after our callback we want to chain on a DOT subscribe and then to clean up this subscription let's return an arrow function which calls Superbass dot remove Channel and pass it our channel from Super Bass and our user fact now has an external dependency on Super Bass as well as the router so let's add those to the dependency array and if we go back to our application and refresh and then emulate our boss adding a to do to our to-do list we can see that to do is in the database but back over in our application we're not seeing it in our list so what's going on here we're actually really really close we just need to tell our Super Bass instance that we want to be told about those events so back over in our Super Bass dashboard we can go to database and then replication and under Super Bass real time click zero tables and then enable this for the to-do's table now back over in our application let's refresh and we see our new to do so let's emulate the boss adding yet another one and back over in our application it's automatically appeared in our list without us needing to refresh yay now something to call out here is if you have a highly Dynamic app like a chat up for example and you have lots of users sending lots of messages everyone's devices are automatically updating you probably don't want to go and fetch all the previous messages every time a new message is sent so check out a link in the description to see how you can do this in a much more performant way now something that makes us more performant as devs is having really accurate typescript definitions for the data flowing through our application if you want to learn how to do that I recommend you check out this video right here where we use the Super Bass CLI to introspect our postgres schema and automatically generate types for our Super Bass clients but until next time keep building cool stuff

Channel: Supabase

Views: 9,719

Keywords:

Id: 6Sb8R1PYhTY

Length: 5min 35sec (335 seconds)

Published: Thu Jul 13 2023