Getting Started with Vercel Postgres

a few days ago Purcell released a suite of serverless storage solutions including versel KV a serverless ready solution built using upstash for cell postgres a serverless SQL database built for the front end powered by Neon and versel blob a solution to upload and serve files at the edge powered by cloudflare R2 with these storage options front-end developers can store and retrieve data without having to worry about servers or infrastructure making the development process much smoother and more efficient in this video I'm going to show you how easy it is to use versel postgres in your project and to do so I'll be reviewing the code of one of our versel postgres templates this particular template uses felkit however we do have a few other postgres examples in our templates Marketplace that uses nux or next if you prefer one of those I will link our templates Marketplace in the description below if you want to go clone one of these templates and follow along okay so before we get started I'm going to quickly demo this project that we'll be working with here we have a really simple app built with spell kid and Tailwind that fetches users from your postgres database and displays them in a table and we're also marking how long it took to fetch the users so to get started let's go to our resell dashboard and I've already created a new project and pushed up some template code to it now the first thing we do is create a postgres store we can do this here in the dashboard by clicking the storage tab and then the create button now we need to select postgres give our database a name and a region which is done for us and then finally hit connect and just like that our database has been created and connected to our project now let's open this project in our text editor and pull our EnV variables from versel using versel e and B pull if you haven't already linked your project this won't work you're going to have to link it first and you can do that by running a versa Link in your terminal now you can see an EnV file has been created with all of our EnV variables next we just need to install versaille postgres and we can do this by running npmi at versa postgres and okay now our project is all set up to use resell postgres so let's move into our server route where we're loading this data if we scroll down this file you'll see we have our basic page endpoint where we are using the load function to load our data it's important to point out that this file contains dot server in the file name which means it's only going to run on the server without this file name extension the load function was run on both the client and the server now this load function is going to return two values our users return from the database and the amount of time it took to fetch our users so here the first thing we're doing is getting the start time which we'll use later to compute the total duration and next we're fetching our users from the database using the SQL tagged literal which I'm importing at the top of this file from versel post res the SQL function is recommended for one off queries and it automatically creates a database connection for you and connects to the database specified in our postgres URL environment variable now we've fetched our users so we can compute the duration value and return these two values to our page like this now it's possible that the database may not have any users in it so for example in our current case we just created this database so it has no users and in this case when we try to retrieve our users it's going to throw an error that users does not exist so we want to see data into our database so you can see here we try to fetch users and if it throws an error we check if the error is due to users not existing and if this is the case we call our seed function and this seed function is defined up here in our file and this function just creates our users table and then adds three users into our database and then after seeding in some data we can once again retrieve the users from our database calculate the duration and again return these values to our page finally if the error was caused by something else for just throwing the error now if we check back in our page the return value of our load function is available to us via the data prop so now using this data prop we can pass the values of users and duration into our table component as props and then in this table we can display them like this so now let's Commit This code and check it out back in reversal dashboard so we can see that we have a new deployment in progress this is because anytime you make a commit Versailles get integration automatically detects this and will redeploy for you so if we go ahead and click on the project we can see that the app is loading our users in the table and if we go back to reversal dashboard we can actually go to our storage tab click into this postgres store and we can browse our data so if we search the table for users we'll see our user data has successfully been added now if we go back to the app once again and refresh the page the data is once again being fetched from the database and this time no data had to be seated in since we already have users existing in the database and we also see the fetch duration has updated okay so that's a really quick overview of how easy it is to get started with Purcell postgres and add it to your project um as I mentioned before this template is available at our templates Marketplace and we also have other postgres templates using next or next and we have templates for the other storage options as well if you want to go check them out I will link our templates Marketplace in the description below I will also link the Versa documentation to check out all these different Storage Solutions if you'd like to do that otherwise I hope this was a good starting point for you if you have any questions leave them in the comments below and thanks for watching

Channel: this.stephie

Views: 5,564

Keywords:

Id: dAF0pZDQqHI

Length: 5min 58sec (358 seconds)

Published: Fri May 05 2023