Introspect PostgreSQL schema and generate TypeScript definitions for the Next.js App Router

I'm going to show you how we can use the Super Bass CLI to introspect your postgres schema and automatically generate typescript definitions we can then pass those along to our Super Bass client and get end-to-end type safety across client server and database let's get into it here I have a to-do app that I've been building out over the last few videos check out the playlist Link in the description if you want to follow along for that Journey but we now have a pretty significant app that's using all of the new nexjs app router things so we have client components we have async server components we have server actions we have route handlers and we have middleware but even though this is a typescript app I actually have very little type safety and I'm actually doing some very naughty things with any because I just didn't have time to think about it so let's get Super Bass to think about it for us we can use MPX to run the Super Bass CLI and the first thing we want to do is log in this is going to ask us if we're happy to install this package which I am and once that's finished we need to generate an access token from this URL so I'm going to copy this one over to my brow browser I'm going to generate a new token the name of this one is just going to be to do app this can be whatever you'd like and then we click generate token and now we'll see this value which we can copy and paste this back over in the Super Bass CLI and you should see finished super bass login and so now we can use the Super Bass CLI to perform actions on behalf of our user so to generate typescript definitions for one of our projects we can run MPX Super Bass gen types typescript we then need to provide a project Dash ID and so this one can come from our Super Bass project itself so we can go to settings and see our reference ID here under project settings so we can copy that and paste it into our Command and if we just run this it will dump our database types into the console but that's not very helpful so let's instead use the greater than symbol to write this value to a file and the file we want to add it to is lib database dot types dot TS and it's telling me no such file or directory exists so we can create that lib folder by saying mkdir and then lib and now when we run that same command to generate our typescript types everything is all good and if we go back to our project we'll see we have this new lib folder and then our new file which contains all of our database types from superbase and so now we just need to find anywhere in our application where we're calling one of our create client functions from the auth helpers and tell it about those database types and so if we have a look at the type that we get back from this function it's a Super Bass client but it doesn't really know anything about the structure of our database but if I tell it about our database and we can import that from at slash lib database.types we can see the type for our Super Bass client is now much more detailed it knows we have a to-do's table and it knows all of the columns that are available now just to keep things organized I like to explicitly say that I'm importing a type and I also like to leave a line between regular Imports and imports of types we can now take this one step further and declare a type for a to do which is equal to database and then the public field and then tables and then our to-do's table and then our row now if we have a look at this to do it gives us all of those fields so we can now fix the type for our to-do's array by saying this is a to do array now if we have a look at our to Do's they're properly typed and we barely had to write any typescript at all now we're probably going to have to import this database and declare this to do type a few places throughout our code so I like to create a new file under the app directory called global.d.ts I can then move that import and the type declaration for out to do into this file and then if we wrap our to do in declare Global this will make it globally available across our entire nexjs app and so if we were to save this one go back to real-time to Do's get rid of our declaration for our to do we can see that to do type is still available and our to-do's are correctly typed so we can do that for our database as well by using an import Alias to say we want to input database as DB and then we want a global type for database which is equal to DB we also need to change our to-do type to use DB instead now if we save this file go back to real-time to Do's we can get rid of this import for our database type and our Super Bass client is still correctly typed without needing to import anything so now we could just do a find and replace and say anywhere where we're saying client with a Capital C and then trying to call a function all the different times we're creating a new Super Bass client and so we can open this up to add our replace and we want to replace this with client with our database type and then make sure we keep that open parenthesis now we can click this one to replace all and yes we want to replace all occurrences and now in our route Handler we have a correct Super Bass type in our server action we have a correct Super Bass type and it's even picked up the title is not a string so we can wrap this formdata dot get in a string and typescript has saved our butts once again we'll see page.tsx is still lit up red and that's because the type on real time to do specifies that this is definitely an array whereas to Do's could be null so we can say either pass to Do's or if that's not pass an empty array and typescript is still not happy because real-time to-do's returns an array rather than a jsx element and so we can fix that in real time to Do's down here where we're mapping over all of our to-do's we just need to wrap this in a fragment and we've got one more naughty any here which we can now say is definitely of type to do and now we have full type safety over our entire next JS app so that's in client components server components server actions route handlers and middleware but there's one crucial step we need to set up first and that's to configure Super Bass auth to store sessions in cookies rather than local storage if you're not sure why I recommend you check out this video right here where we learn all about the new nexjs app router as well as Super Bass sessions and why we need to store them in cookies but until next time keep building cool stuff

Channel: Supabase

Views: 7,871

Keywords:

Id: VSNgAIObBdw

Length: 5min 47sec (347 seconds)

Published: Thu Jul 20 2023