Check out a free preview of the full Build an AI-Powered Fullstack Next.js App, v3 course

The "Database Utility Methods" Lesson is part of the full, Build an AI-Powered Fullstack Next.js App, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott creates a database utility method for managing connections. With hot module reloading, multiple database connection objects can be created and cause issues in the application. These utility methods check if the connection has already been established and reuse the existing connection.

Preview
Close

Transcript from the "Database Utility Methods" Lesson

[00:00:00]
>> Well, let's create our client that we're gonna use. Cuz every time we make a client in the database, or I'm sorry, every time we make a client, which is an instance of the SDK, it creates a new database connection. So we kinda wanna cache that, and we'll create that, and then we'll be able to use that in our app.

[00:00:17]
So this one won't take along. Let's head over to, Let's make a new folder. Let's make a new folder called Utils, Like so. I'll put it on the root. Inside of Utils I'm gonna make a new folder called db.ts, it's not a React file, so there's no tsx or jsx.

[00:00:45]
And then I'm just going to import from @prisma/client. And I'm gonna get Prisma, or is it a named import? Is it a named import, yeah, prisma/client. And there's a lot of ways to do this. And I've went back and forth on a lot of ways, so I just wanna make sure I'm consistent with this one cuz this one actually is important.

[00:01:14]
So I'm gonna see what I did here. Yeah, I'll copy this and then we'll talk about it. Okay, few things gone, few lines of code but it's actually really important. Like I said, when you make a new instance of a client, like here, you're creating a new connection to the database.

[00:01:40]
We wanna try to limit those connection strings as much as possible, even though we're using PlanetScale and it scales those out for us, still, we kinda just wanna do that just in case. And basically what we're doing to get around that is we're just checking to see if we already instantiated prisma, and the way we can check that is by assigning it to the global.

[00:02:01]
So you have this thing called globalThis in Node, globalThis. It's basically just the global space that you're running in. It's like what's left to the dot of the global space, that's why it's called globalThis. And we're just gonna to check to see if prisma is there first, right here.

[00:02:25]
And if it's not, then make it, And assign it to the variable of prisma. And then if we're not in production, add that to the global prisma, only in development mode. The reason we also do this in development mode is because of how Next.js does hot reloading and stuff.

[00:02:45]
Every time you save a file in Next.js, it does a hot refresh, hot reload, and it will mess up the database connection, and it will just break eventually. After like ten hot reloads it'll be like, I don't have any more capacity to make a database connection, so this prevents that, yeah.

[00:03:02]
>> Be a dumb question, the as unknown as brace on line three, that's just TypeScript, yeah?
>> That's just TypeScript, yeah. This is a fancy way to coerce a type into something. So first you convert it to unknown, and then you convert it to whatever the hell you want.

[00:03:18]
Why do you have to do that, that's TypeScript. If I just did it this way first, it'd be like, no, that's not that. So then I'm like, okay, well, now you don't know about it, and now I'm gonna tell you about it, right? [LAUGH] Yeah, it's fancy. So, yeah, it's like if you're doing this, it's like, what's the point of TypeScript, but whatever.

[00:03:42]
I actually just read an article about the Svelte team moving away from TypeScript, and instead just using type annotations and comments which gives you the same result. You can just put the type annotations in the comments and have TypeScript read that. So, thought that was pretty interesting.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now