SvelteKit + Drizzle Code Breakdown

this is the silly little to-do app that we've been building out over the past I don't even know how many videos it is was originally designed to be a goaling back end with a spell kit front end but ultimately I made the call to switch everything over to spell kit into our entire full stack app in svelt kit you want to see the reasoning on why I made that decision check out my most recent video but today we're just going to be doing a code breakdown showing you guys how all this works how drizzle Works which is the orm we're using it's an amazing orm and the sort of code behind it so without further Ado let's jump into the code so I think the best place to start with this is going to be just with the sign up page I think we kind of just go Page by Page and I'll show you how all this is working so before we do the sign up we're going to go ahead and we're going to show you the drizzle setup so like I said for the orm we are using drizzle it is a fairly new orm it is super lightweight it's effectively just a typescript raptor around SQL which I love it makes it super clean and easy to go ahead and write type save say equal but you're still writing SQL not some weird orm language so to start this we got to make a schema so like most orms that you will deal with you have to define a schema for your database tell it what the models are what it's dealing with and I went ahead and did that in my schema.ts folder drizzle can handle migrations and database pushing and all that stuff we're not going to be going over that today that'll be a future video where I talk about how I manage my databases specifically in the sort of newer context with Planet scale and neon and branching and all this stuff that they've got I love the new way of doing database is so much better than the old way so we'll talk about that soon but for today these are just the models that we're going to be using I declared them as users table and to-do's table and then you can go ahead in here and say okay this is the MySQL table because we're using MySQL you define what the name of the table is in your database one of the most useful things I think that you guys can really see when we're working with databases is how these orms connect directly to the SQL underneath something I didn't get for a very long time which really stunted my growth as a back-end engineer was I was super reliant on Prisma and I never looked at how it's really impacted the underlying database I could only interface with my database through the lens of Prisma versus with Drizzle I think it's a lot clearer and that connection between your database and your orm is a lot more it feels a lot more tight if that makes any sense so the reason for that is if we go over here to my this MySQL table this first argument is what the table name is so the table name is users and then we're defining what the fields are I'm defining the ID as the primary key serial just means it's an auto incrementing integer so I have my integer primary key which is signs over here if we go ahead this is table plus by the way I get that question a lot if we open the structure of this table we can see right here okay so this is an integer this ID is an INT it's Auto incrementing you know we get all that information we also get that from serial then we have our first name which is just a varchar 255 last name same thing email password all this stuff is great and it directly assigns to what we have over here and we do the exact same thing for the to Do's all good stuff here and we get these two objects which are exported which are going to be our to-do's table and our users table within the uh drizzle documentation they recommend they set this just as like users and Justice to Do's I added the table afterward just because it makes it easier for my brain to look at this to be like okay I'm dealing with the users table object elsewhere because we're going to be using this a lot this and this are going to show up everywhere within our code because that's sort of how drizzle works it uses these to build out our queries so when we go into our sign up page we end up with two different uh key functions here we have load which is just making sure they're not signed in and then if they are sending them away and if they are um and then if they're not we can go ahead and sign up and then we do all that within this action so if you watch this series already you've probably seen the form data stuff that we handled we're just using the spell kit forms this will be the last time I talk about these in this video but this is the sign up page and this is the sign up form it just is a form right here which has an input of first name last name email and password so all of that gets submitted to our backend using uh form actions which is super useful and convenient the next thing we need to do is we need to actually like set up our user within our database obviously we need to Hash the password because you can't store passwords in plain text so I'm just using bcrypt right here to Hash the password it's nice apparently bcrypt works in Edge runtimes I have all this hosted on the edge and it works there so that's super awesome um we're able to Hash our password and then we do our drizzle statement so if you remember before we had to make an external call to our goaling back and do all this stuff and now all we're doing is we're basically just doing a SQL insert right here within our spell Kit app and the Syntax for this in drizzle is super super clean and super super easy so their documentation will be linked below and I highly recommend you look at it so this right here is going to be super similar to SQL if you're familiar with the SQL insert statement this is the same general idea we just are declaring okay we're going to be inserting into the users table so I'm going to be inserting users table and remember this users table is what we defined way over in our schema and we imported that that's the reason why I named it users table instead of just users because I think it's way easier to be like okay we're going into the user's table and we're dealing with the database here not just like an array of users or something like that so we insert into our users table we Define what values it's going to be this is all typesafe so if I went in here and I said fake vowel and then just set it to be this it'll yell at me so this right here it will throw an error because it's not on the types we declared so we get typesafe SQL effectively but it's still generally speaking SQL and this is all a lightweight typescript wrapper around yeah it's just a typesafe SQL wrapper around our database super easy the syntax is really really clean and then we go ahead and we just create a JWT I made this little JWT helper server method thing which is just creating and verifying jwts I'm using this um this different JWT package the reason being uh the default JWT package doesn't work in the edge runtime so I wanted to make sure everything could run on the edge so we just use this one it's more lightweight it works with all the JWT stuff we need and we can set our headers and stuff that way so I'm just creating the JWT setting the token and then redirecting to me so we go in here and we could just do a test a video and we'll just do testing from video Gmail Dot dot com and then put in a password and then we hit enter and then bam it just works so all of that was created and now we can go view our basic to-do app example and let's look at that because that's going to be the most interesting stuff with our crud Roots so we go into this page.server at the root and that's going to be for our app again you just have to add a line and then save and vs code will figure it out I don't really know why that happens but it does what we're doing here is we have once again we have the two actions and load there's a lot more actions this time because it's you know it's the to-do app page it's we need to have crud roots in here if you've been watching this series up until now you know you'll notice that a lot of this is very similar to what it used to be it's just instead of doing an external call to our goaling back end we just typically switch that out for a really simple really easy drizzle statement in here um so we go in here and we're going to go okay so let's load the data and we need to fetch the users to do so all we have to do is just do a select statement again if you're familiar with SQL which I highly recommend you get familiar with SQL this is pretty much just how it normally works I'm just saying okay we want to select these fields so I'm selecting completed description title and ID I have to tell it what those are going to be because that that's how they get the type safety in there so I'm telling it that I'm going to get the to-do's table completed to Do's table description etc etc remember this is what we defined in the schema I just want to hammer that home over and over again because drizzle uses that a lot so we're pulling out these four fields and then we go ahead and we're grabbing it from the to-do's table so this is just the select defining the fields from here and then we're just doing a where statement where the user ID on the to do is equal to the currently signed in user so all of this very closely maps to SQL and that's a pattern you're going to see everywhere and that's my favorite part about drizzle is how close it is to SQL to where it's this same general idea with type safety which is awesome so we get these to Do's they're fully type safe we know that it's just an array of to Do's with completed description title and ID it knows description is optional everything else is required and then we return this and then we have access to this on our page and we can display it out so if I go in here we're going to get nothing because we just created this account so let's go ahead and add some more stuff to it so the first thing we're going to do is to create again we're just doing the form data I don't need to repeat myself here making sure we're logged in grab the user's information from the verify all JWT and then we go ahead and we just insert into the to-do's table again exactly as we did before we just say okay we're inserting into this table and we're just defining these values obviously this doesn't map to SQL one to one but it's the exact same concept and it's really intuitive once you get used to it and what's amazing about this is how lightweight it is to wear there's no code gen on all of this it just kind of works and it can run in an edge runtime which is awesome so we're just inserting title description user ID and completed on here so we'll go ahead and do that we just put in this and this we add it and then it'll show up because we refresh the page on submit we redid that get request and now we have this information so all this is working great the last two I'll show you guys are going to be the delete and update for the delete method again all we're doing is grabbing the ID of the to do if you remember from the earlier videos we're doing a cool little trick in here where within our page itself I'm printing out all these to Do's over here I had this complete and delete instead of setting State and passing in like form parameters and all this stuff and dealing with that I'm actually just still using basic HTML forms but I'm getting a little Fancy with it and I'm setting this hidden ID input of ID and setting its value to be the to-do's ID so anytime we submit this form right here and this is the complete form sorry this is the delete they do the same thing effectively on the front end anytime we submit that we're going to be passing this ID with it so I can pull that out of the form data so I can pull form data out of the and pull form data out I can go ahead and use that down here to delete where the to-do's table ID equals the ID that we passed up and then it just works again very close to SQL and I've said that 15 000 times remember you gotta pass in the to-do's table argument and then it works so we go in here I guess we'll do complete first it's the exact same concept just an update call we're updating the to-do's table we're setting completed to be true and we're doing it where the to-do's table ID is equal to the ID we passed in so this is all very basic crud stuff it's very quick it's very easy it's very SQL like and their documentation is fantastic that was a complaint for a while they didn't have docs but now they do and they're great so you go ahead you go ahead you update things you delete things and I'll show you how that works complete delete and that's it I feel like there's more I should be saying here but it really just is this easy and that's what's kind of crazy about it is it's just SQL in a lightweight typescript wrapper that just works and I know a lot of you like these are very simple contrived examples the to-do app is as basic as it gets but like these are the foundational Concepts on which any app will generally speaking be built crud operations are at the base layer which we can build on top of do more complex things and of course you could have more complex queries than this of course you get more complex inserts and updates and all that stuff and far more complex logic and UI but the same concepts are going to hold the entire time and it's going to be just as quick and just as clean any way you do it so I love this setup drizzle is awesome make sure to go their links are down below try them out start their repo support the guys making it they're awesome and yeah hopefully this was helpful I know this was super quick and basic but like there's just not that much to say it's just this easy like I I don't know man it's just good if you enjoyed it make sure you like subscribe do all that stuff and I'll see you guys very soon

Channel: Ben Davis

Views: 12,253

Keywords: Svelte, SQL, MySQL, Drizzle, ORM, SvelteKit, Web Development

Id: EQfaw5bDE1s

Length: 12min 18sec (738 seconds)

Published: Sat Jul 08 2023