Supabase & Sveltekit - Realtime Blog

hi there so in this video we're going to take a look at real-time subscriptions so here in the docs we can come um super base docs references we're going to be looking at this part right here real time so basically when any data is inserted or updated or deleted from a certain table then this will alert you of the change and then you can immediately make it visible on the ui so a good use for this would be something like a chat app or maybe yeah in our case it's going to be a blog where the comments are and posts are updated automatically uh so for example here like if i have new post for real so you see there's just new posts down there blah blah blah add post uh now it's down there okay and it's also been added to the database here in our post table new post for real okay but let's start over we're going to delete this table and delete the comments oh other objects depend on it so then we have comments basically that are you can comment on a post so let me delete the comments and then i can delete the posts okay remove that and i've kind of given up on css i just kind of get too obsessed with it and then i don't make progress on these videos so um this is what it looks like okay so i have just a basic setup basically i installed at supabase bass slash hula bass dash js and then i have the super bass file um create client like this import dot meta dot m v super bass url which come from these both come from dot end right here and note that they have to start with veet like this for v to actually pick up on them okay so anyway okay so this is the code so basically it's just an index and a post um and i just have those there in case i forget i can copy paste okay so let's get started i don't know why this still has something on it it should be blank there we go okay so first thing we need to do is make a new table we're going to call it posts description now okay add columns so a post can have a title it's going to be text and a some content so content is going to be text save okay cool and then we're going to have comments like this and we're going to it's just going to be um i'll call it content keep it consistent and it's going to be text and then we'll also have a foreign key which you do with link and the foreign key is post here and it'll be based off the id shirt okay save okay that should be good error for input at columns i need to give a name which is post okay there we go okay so we have our posts and our comments so let's start something here with index so we're going to have script we're going to import super bass from lib slash supabase and we're going to so another thing is that i'm not going to have any users log in so basically anyone has access to any of this data and can do anything with it okay so not ideal but just for example purposes that's what we're going to do so so we don't need to log anyone in basically what we need up here is let's have a main tag and then in that we're going to have our h1 so welcome to my well our blog because anyone can use it and here we'll have two parts we're gonna have a make a post and then we'll also have a um see your posts like that okay so here under make posts let's have a form so form we'll have an input now let's do this quickly kind of sloppily placeholder equals title and um the name equals title should be good and then a text area oh that's my dog you can maybe okay i've moved into a hopefully quieter place let's see if this works better okay so anyway uh text area nine equals content okay so this is our form and we're just going to get a little button here at the end make post okay and then when we submit this form on submit okay not that submit prevent default it's going to be add post okay so let's make that function here and actually i'll just copy paste it from here so i have to type that all out okay so add post what it does is it takes the form data which will be right here name equals title name equals content so whatever's in those it's going to pass here to form data and then form data i get title form data i get content so await super base stop from posts insert that okay and that is going to make a post for us so now we just need to do the part where we can actually see the post on the screen that does that weird thing sometimes okay and let me add to the main some of these styles right here just so it's uh in the middle hope still looks weird uh how did i form i just use the br okay i'll just quick and dirty like that okay there we go so now we have to make a post so i can say title uh first post very good post i make a post and it doesn't show up there but it should show up in our database right there very good post okay cool so let's do the subscription thing now okay so how i'm going to do it is with a readable store in svelt so import readable and we're also going to need the get from store and we'll start it right up here so cons posts equals this readable store so i'm going to start out with null and then here in the second part this is going to be the function that when it gets subscribed to um it'll set the function and well sorry when it goes from zero to one basically this will set the initial value we're going to set it in this function and then we're going to also have uh something we're gonna add some another subscription from supabase that will update uh the value from within basically okay so the first thing um is to actually go and fetch the data of the posts so this initial value so initial value is null but right after that it's going to be calling the post and it'll get you know all the posts and then from there there'll be the subscription okay let me just show you so here we go we are going to want to set a value oh how do i even get started okay i'm just gonna have to rely on this again okay so readable set right here so we can't make this an async function unfortunately because we need to return this value here from this function we can't return a promise so we're gonna have to do like this from select then so we're gonna from posts get everything and then set the data um basically set the value of the store to whatever data we get back okay so that's going to set the initial value so that's all we would do if we wanted to um so if i refresh oh wait i need to show it on the screen this is what we do if we don't want it to be real time if we just want on page load we want to show the posts so down here let's actually show the post so each dollar sign posts as title content um we'll have an h three which will be the title and then a little p tag for the contents okay that should be good what did i do wrong yeah okay so we need to say since it starts out as null we want to say if uh posts then actually show them else they're loading else loading oops okay oops oh boy i'm like hunched over here on the desk with this mini desk in another room so okay anyway so now we can see when we load it'll load and it'll show us but if i made another one second post then i need to okay so i submitted it i have to refresh and now it's there okay but we want it to immediately appear right after we hit make post so that's where the subscription part comes in so here uh from this thing we're supposed to return like an unsubscribe function so in superbass to unsubscribe uh to be honest i don't 100 understand when you need to unsubscribe i haven't ever really done that but um either you're always supposed to or i don't know please leave in the comments if you know when you're supposed to unsubscribe but anyway this is probably best practice okay so right here we just need to say um add subscription to supa base logic okay and again i think i'll just copy paste because that's quicker so this is what we're gonna have right here so we'll call this subscription which is what gets unsubscribed from down there so basically superb stuff from posts on so on uh any change so this could be like insert or it could be um update or it can be all like this so payload is going to have basically three things we care about is payload.event type which is going to be insert delete um update upsert there's going to be payload dot new and payload.old which would be used for an update so we're only going to look at insert in this video but uh so we only care about new like the inserted thing but if you're doing an update then you would be looking at old delete i'm not sure what you'd be looking at but okay so basically whenever anything changes we're gonna say if the payload event type is insert then we're going to get the posts that already exist in the store and then we are going to add paylo um we're going to add the newest post at the top or at the end of the uh post okay so it's going to set the new uh store value okay so this should work let's see now um okay oh boy someone's got a motorcycle okay real time post make post and we don't see it let me see if i got an error uh no aha okay so the thing i forgot to mention which you need to know is that if you actually want to use real time is that you need to go to the store so here we are at posts and we need to enable something what is it um [Music] we need to enable where do we find that though storage authentication some kind of okay let me just look at the docs we need to note managing replications go to database click on replication uh database replication okay here it is and then click here on zero tables so basically we want to turn on posts okay and hopefully that should work now so refresh there's a real time post really real time post okay there we go now it's working and let's also put the comments too okay so that is how you do it i guess i mean that could be the end of the video because you can now do a real time thing uh one way we might change this if we're only doing inserts is we might just do insert and then we wouldn't have to actually check if it's insert because we already know it is like that but i'm going to add in the comments as well which will have a bit different of logic um and it might be useful if you want to make some type of blog thing as well okay so we have a post uh maybe i'll just do this quick i'm not actually going to type it all out so we got a post let me get rid of this one this is an empty one i was gonna type into oops i'm gonna have a post and basically it's very similar um it takes in the id title and content and it's similar in that it has an ad comment right there and it has this readable store which is the subscription um logic and it's just you know comments if there's no comments don't show them and here's just an ad comment thing okay but basically here the logic is a bit different is because we are passing in the so let me put that in here post uh so title content so i could pass in title content individually well sure i'll do that and id and then pass those in so it takes title content id let me import that post okay oops why does it do that okay so now i gotta post uh let's see cool first very good post uh closing tag down here post okay hopefully that's working now cool so no comments yet for any of these um so you'll see when i very good post actually very bad post that comment oh okay people are gonna say bad video because it's not working so i clicked add comment uh but we see it didn't show up let me make sure last time i clicked on one of these and then it didn't actually save it okay but it did save it this time so i just messed something up so let's go back to the table editor and look at our comments okay i didn't even add the uh didn't even add those there so let's come here to post add comment what's going on comments for me to get comments post dot equal id update post content i see okay so basically uh before when i made this i didn't call it content i called it comment big mistake so i just need to re-call this content and hopefully it'll work from there uh this should be comment content okay so basically when we insert it we just need to pass the post id along with it okay so the id is automatically created when you create a post and remember i um i have a post like an id so you're basically just putting in the id of the post which is just a number one two three four okay so basically passing that id down into the post so this this post knows which id it has and then whenever we create a comment we just want to make sure we put a reference to that post right here so post is that id and uh the content goes there get common is that okay that should be fine okay let's see if it works now so let me refresh no comments yet bad bad bad add comment there we go so that adds a comment i can keep adding it if i want and then here i can say good add comment you'll see it's there and then another thing is if i open another window here and i put this to the side hopefully i don't accidentally show anything bad okay here we go uh and then i say here this person really likes the post so i say good good i add comment and it'll show up on both of them okay so that is how you can make this little blog thing with real-time subs uh real-time what subscriptions uh so the other thing you'd want to do is you know in reality you probably uh you know anyone basically anyone can do anything with any of this data uh so that's bad probably um so what you would pro you would want to do is come here to row level security uh so create some kind of policy where enable insert access for authenticated users only that's a start so you can only create something if um so you could use this template and save policy if you wanted to so you have to log in first so you have to create the login and everything and then you could display the username next to them or something that's one thing you could do um and then you'd have to make a policy like when they delete that they would uh need to be the creator of the post actually delete it okay but i'll get into a level policy a different time i'll try to put this up on github so you can take a look and that is all for this video have a wonderful day

Channel: Svelte Mastery

Views: 3,305

Keywords: svelte, javascript, web, development, frontend, front end, tutorial, learn, coding, programming, design, framework, css, html, css3, html5, es6, sveltejs, svelte.js, js, .js, svelte3, svelte 3

Id: 7_9rUtwM-q0

Length: 17min 54sec (1074 seconds)

Published: Mon Sep 06 2021