Transcript from the "Seeding the Database" Lesson
[00:00:00]
>> What's really helpful is when you're building out application that has like a UI is to have real data to work with. Because how are you going to build out those actual components, you have to mock that data out at some point. And there's a few ways you can mock the data out.
[00:00:17] You can hard code the data right into the components with text or whatever you wanna do. That's cool, but when you get the real data in there, you're gonna be changing so many files. So I typically don't like to mock that low. Another step up from that would be, I'm gonna create this data file that's just got hard-coded JSON in it.
[00:00:33] And I'll just pull that in wherever I want, and that'll be my mocks. And I think that's actually a good approach as well. Because when it's time to replace it with actual database stuff, it's just get rid of this file, replace it with a database call. But I'm gonna go a step further up and say, we should just mock the database.
[00:00:50] So we should just put some seed data in the database, just give it some fake data. That way we can write our code assuming that everything is already hooked up, so we don't have to go back to our code later on when the back end engineer is done with the routes, and now I got to replace this fake data that I had and use real stuff.
[00:01:07] Well, if we do it this way, if we see the database, our code won't have to change even though we switch over to production, it will be the same thing. So that's what we're gonna do. We're gonna see the database. And seeing the database just means we're going to put fake data in the database programmatically.
[00:01:25] That's literally what we're gonna do. So let's do it. First thing we need to do is create a seed.ts, we can put it anywhere, I'm going to put it inside of our prisma folder. Like that. [INAUDIBLE] put wherever you want, but I'm gonna keep everything together. So put inside the prisma folder.
[00:01:53] And just like everything else, I have all the code here. So we're gonna look at it, but just to walk you through what it is. I don't know why this isn't syntax highlighting like the other stuff is, but this one's just a lot of inserting big data, so we'll put it in here and we'll talk about it.
[00:02:11] It's not so important. So here we have a few things happening. So let's just walk through it. So the first one is, we have this main function here, which basically is just a function that gets called when we run the seed script over and Prisma is gonna run the seed script, and all we're gonna do is use our client to observe a user.
[00:02:38] If you don't know upsert is basically mean find or create. If it doesn't exist, create this thing, that's upsert is. So we're just gonna insert a fake user that has this email, has this first name this last name, has this password, and does all this, it creates a project.
[00:02:57] That project has some fake project names, and then we're gonna create some tasks based off those projects, and we're gonna try to insert them. If you try to run this right now, it'll break. It's a lot of stuff we don't have. So, you can't run this yet. But that's basically what the seed script is doing.
[00:03:12] So we gotta fix a few things to get the seed script to run and then we can do it. So the first thing is you might have noticed that there's like these @/lib/db, all this stuff up here. There's this really cool thing you can do in type script if you're using type script.
[00:03:32] If you to the tsconfig, you can go down to the compiler options. And you could do something called aliases. I'm sorry, it's called paths. There we go. So you can have something called paths in here. And paths are basically aliases to other paths. So I can say I wouldn't make a path for @/lib like that.
[00:04:05] And I can point it to everything inside of lib, so I can say this it'll be like that. Why is it so freaking out? Just one star, sorry. Do you want one star, two stars, how many stars do you want? You notice there's is one star.
>> I would just say one star and my notes.
[00:04:37] Well, it's freaking out on me on one star so. No, that one's not said to you forget to. I gotta do that. No, why is this thing freaking out?
>> I think it just has to catch up.
>> I think I'm moving too fast. Yeah, I'm moving too fast.
[00:04:53] I'm like, why is this thing freaking out? Okay. There we go. So lib, and what I like to do is, I like to set and a path for pretty much every single thing that's on the route that's gonna be imported. So I can make a path for components.
[00:05:08] I can make a path for what's another one? Styles, assets. Probably wouldn't make up for app cuz you're never gonna import anything in the app folder anywhere. Those things never get imported. You just don't do that. So yeah, we'll be doing that a lot here. So I'm just gonna go ahead and make some for the rest.
[00:05:28] I'll say this will be for components, and this will be opponents. We do one for assets, There we go. And then to go back to seed, no I had this thing must be like slow catching up or something. But it's not liking it. That's all right. We can do it the hard way.
[00:06:19] Just type the path out. So, we'll just go straight into lib and just grab it. I don't know why the things messing up. So we got our db here And then the other thing we need to do is the hash password we haven't gotten there yet so we're not gonna do hash password.
[00:06:37] So right now we're going to break the rules and just do a plain text password for a seed user. So right now we're getting this error on Prisma I've lost my train of thought there, so you can see that as type checks if I go into Prisma say db.user.
[00:06:55] First of all it knows that we have a user dot, I could do something like create here. And then I can call create, and I can say create an aggregate data, and then right now it's gonna require me to pass in everything that a user needs to be created.
[00:07:11] So you can see right here, our user needs an email, first name, a last name, I think a password, maybe even something else cuz it's still freaking out. So it just knows all the stuff that you need. So, right now I believe what it's saying is for the email is that [INAUDIBLE].
[00:07:40] It thinks email doesn't exist on where, so let's go look at our schema. It's right there. Let's do that. And then we'll have to just run the Generator again. No, there it is. I guess I wanted it to be unique, good catch. I thought that was only for find unique, I guess maybe upsert is restricted for unique as well.
[00:08:10] So, there you go, I'm learning stuff everyday. Upsert is what's called a, what is the word that I was looking for it? It's when you right? So if you want to create code where it does the same thing every single time no matter how many times you call it, it's something you would use in the case of a transaction so you don't have to write a bunch of every statements to roll back things you can just do up cert so it's very useful for that.
[00:08:38] I usually use it a lot in places where I'm talking with Stripe. So if someone signs up and then make them an account on stripe and you do all this, but in the process, something broke, you gotta undo all this stuff, you can use upsert. So you don't have to go back and roll everything back.
[00:08:55] All right, so we got that. Now, the other thing we need to do.
>> So upsert isn't like all or nothing? Upsert, it's basically saying, find this. If you do apply these updates, if you don't find it, make it with this.
>> So, update or create?
>> Yeah.
[00:09:25] Okay? The other thing we need to do is we need to tell prisma about the seed because it's gonna do some pretty cool stuff for us when we do migrations. But before we do that, the seed script is not gonna run in the same TypeScript environment that our project is gonna run in, because the project has a different configuration.
[00:09:50] So we're gonna make another tsconfig file specifically for the seed script, which is exactly the same tsconfig file that we already have, with one thing changed. And that's gonna be the compiler option. For the seed script to run, we have to have compiler or I'm sorry, the module option to module esnext.
[00:10:10] But it's got to be common JS. But next JS needs it to be esnext. We're just gonna make another one. And just point it to that. So I'm just gonna copy everything that's in here, make a new file on the routes. We're gonna call it, what did I call it in here?
[00:10:25] I think I called it a tsconfig-seed.json. So I'll just do that. Paste that, literally the same thing. Only differences you can see right here is the module says Common_JS All right, so we got that. And the last thing is just to tell Prisma about it. So this is really simple.
[00:11:06] All we have to do is go to the package-json anywhere on here, on the route. Don't put it in the scripts. Don't put it in dependencies. It's on the route of the package-json so I'm just going to put it underneath the scripts. We just have to say add this new key called prisma.
[00:11:21] It has a property called seed, [INAUDIBLE] something called ts-node. So ts-node is literally the same thing as the node runtime that allows you to evaluate node right in your shell, your bash, ts-node is that what just TypeScript. So we're just gonna run the TypeScript file right now without having to compile that dash p points to this configuration file that we just made.
[00:11:48] This dash our tsconfig paths register. We installed this earlier as a dev dependency here, tsconfig paths. This just makes sure that the paths that we just made that I was just stuck on are going to be respected by ts-note, we don't do that ts-node won't respect those paths and all of our imports are breaking our seed script will run.
[00:12:11] And then transpileOnly means I don't care if I have TypeScript errors, leave me alone, just do your job. That's what transpileOnly means. And then finally, this file, okay? So once you do that, we can actually see the database. So to do that, we can just run a migration.
[00:12:33] So if you go here you can run npx prisma migrates dev [INAUDIBLE] migration. It's gonna try to run on migration. Again if you are using a database like I'm using right now, it's gonna take a minute. If you're using a local database it'll run pretty quick, so he's got to give it a second.
[00:13:01] And you can see right now, it's saying, you added this unique thing. Are you sure we run this migration? Yes, I do. Email, sure. It's applying the migration. There we go. So, we did the migration for those changes. And then for the seed, we can just do npx prisma and I believe it's db seed.
[00:13:37] Okay. Looks like I had an error. What did I get an error on? Create mini. It's saying that something with my description on my task is not right, so let's see. If I go to my task, I never add a description on my task, so I'm gonna add a description on my task module like so, give it a string, make it optional, save that.
[00:14:10] I now have to run a migration again npx prisma migrate dev, okay? I'm gonna to call this task description, something like that. Let that run. Cool. I'm gonna try to see this again. There we go. So, I logged the output of this, and this is what I got.
[00:14:35] I got, this user with a couple projects and about 50 tasks. So now we have some seed data. So one thing I wanted to show was, earlier we seeded the database with a bunch of content, but we never actually looked at it to see if it was there.
[00:14:57] So I'm gonna show you how to look at that, I thought that that was very important and weird that we didn't look at it. So, I'm gonna show you that. So if you go in your terminal and you type in npx prisma studio, you get this app here.
[00:15:16] And if you see the correctly you'll see something like this, projects 5, tasks 50, 1 user, this is what you should see. If you click on it for instance the user you can see that it's a user with an email and a first name called user and a last name called person, and password and all that stuff here's the projects here's the tasks and click on a project here.
[00:15:42] Open up a new tab. And then I can click on the tasks in the projects to each open up any tab. So this is how you can view your database using prisma. I was using NPX Prisma Studio and you get to check it out. So this is your best friend.
[00:16:05] Cuz we're using Postgres, you can also use PG admin or whatever that tool is. That is really good, but looks really bad. That one, like it is really good. I can't even lie. It's so good, but I hate looking at it. So it works though. But I mostly just use Prisma for looking at my database stuff.