A second version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build a Fullstack App with Next.js, v2 course.
Transcript from the "Seed User Data" Lesson
[00:00:00]
>> The next thing I wanna do is get the playlist page working, so when you click on a playlist, we can actually navigate to a playlist page and see playlists, and then eventually see songs. And it could eventually click play, and then play a song, and then we'll have a fully working app.
[00:00:15] Cool, so got everything here, well, actually, before we do that, I just realized we had a bunch of fake content in here, I forgot we marked all this out. So it's actually replaces with real data from the user and then we'll go on to do all the things that I said.
[00:00:30] I totally forgot this was fake. Let's replace that fake data with some real data, so we'll head back into the home, which is pages indexed, and we'll get rid of all this hard coded fake data. And instead we'll do our useMe hook, right? So we'll say const (user), which is what I called it, I'm pretty sure, equals useMe, like that.
[00:00:53] We'll do a useMe hook, and now we actually have the user, but this is where I said. I remember in our schema, we didn't actually put a name for the user, so let's go back, add a first name and a last name to the user. And then we'll update our seat scripts, so have our test user to have a first name and a last name.
[00:01:13] And then we'll do a db.push to update our database and then we'll get a first name and last name that will be good. So go back to your schema, go to your user model, add a first name, some I'm gonna say first name as a string, it's required.
[00:01:29] Then last name, that's a string, it's also required. So we got that, and then now, I'm just gonna stop my server, I'm gonna do npx prisma db push and see what it says. If it thinks we're gonna have breaking changes like it says right here, you can see it says, added the required column first name to the user table without a default value.
[00:01:59] There are four rows in this table that is not possible to execute this step at it. So it's basically said, hey, do you wanna supply the change to the database? You're gonna have some corrupted data, you're gonna have some data loss, or no, and do you wanna go run a migration?
[00:02:13] So this is where you would say no, [LAUGH] all right, so you don't get fired. [LAUGH] But because I don't really care about those tests using the database, I'm gonna hit, yeah. But typically, you would say no here and then you will go run a migration instead. You wouldn't do this db.push thing, you would go run a migration that will, in the case of first name, last name, I don't know what you would do in that migration.
[00:02:36] It's like how do you know their first name and last name, I don't know. I guess you wouldn't make it required, until you figured out all the other people in the database first. And then going forward, everything will be required, so you have to figure that part out.
[00:02:46] It's a tricky part, but yeah, I don't really care about the fake people in my database right now. So I'm gonna hit, yeah, please, I don't care. So now, it's like, cool, you're in sync. I hit, yes, we're good to go, and I'm probably just gonna do a reset, anyway, that's why I didn't care, so I'm just going to do a, npx prisma migrate reset.
[00:03:12] So this is gonna basically run through all the migrations again and delete everything out of the database. Which is fine cuz we have a seed script that's gonna put it back in, yes.
>> Before we run this migrate, should we add the first and last name for the test user to the seed script?
[00:03:24]
>> To the seed script, yes, so I'm so glad you're thinking of that, yes, exactly. So let's go to the seed scripts which is in prisma, where's my, there we go, prisma seed, right, to where we're doing the user stuff, Right here, and we're gonna add a first name and last name.
[00:03:47] Add your name, if you want to. First name, that's gonna be, That's gonna be me, and then last name, that's also gonna be me. There we go, so we got a first name and last name to the seed scripts. And then now I can prisma migrate reset, which will literally get rid of everything, and run the seed script again, and the client again, and all the stuff again.
[00:04:26] So right now, it failed because it's saying the first name does not exist in the current database. That's because I did a db.push, I didn't do a migrate, so I forgot about that stuff. We actually had to run a migration because I'm trying to delete the database. Somebody deletes the database, it tries to replay all the migrations in history.
[00:04:43] But because db.push doesn't add a history to the migration, it didn't know about that change, so there's really only two ways around that. I could just delete all the migrations and completely drop the database, and just start over from scratch. Or I could just do what it wants me to do and do a migrate, so I'll just do it.
[00:05:00] Migrates, Dev, and it's gonna ask me for, what do you wanna call this, what do you wanna do? So it's gonna go through that, so I'll name this migration, I'm gonna call it user-names, like that. Okay, cool, so now we got the migration called usernames or whatever you called it.
[00:05:30] The SQL files is created, so now I should be able to reset this database, and yes, I do wanna reset this database. And once you run that, you should have your migrations, you should have your new seed, which is your user first name and last name in there.
[00:05:46] So now, obviously, if I run this server, technically, my jtt should not be good and it should just be broken. But it's actually still gonna work, because I know for a fact that even though I dropped the database. Previously my user had an id of 1, and now because I see it again, that user still has the same id of 1.
[00:06:07] So technically, it's a different user, but it's the same user id of 1, so I don't actually have to sign in again, it should just work. Because the ids are enumerated from 1 till whatever, this is mongo, you have to sign in again, because they don't start at 1 and go up.
[00:06:24] They're just random every time, but not this case. Okay, so we're back here. Now, we can actually get me in the index file, so we have our user and I'm just gonna start replacing some of these out. So title would be, User.first name space user.last name. Like that, there we go.
[00:06:57] And it should still say the same thing cuz it's the same thing. Right now, it's freaking out because I'm assuming that the user is always here. But remember, this is asynchronous, so there's a isLoading state here that I'm not handling. So this is kind of where, I think this comes down to a design aesthetic of, do you just not wanna show the whole page?
[00:07:20] And that could show what that looks like, they'll be like a flash, it'll look pretty gross. Do you wanna show what people are doing now with skeleton loaders, chakra has the skeleton things we can use, which is pretty cool, or somewhere in between, right? So basically, the problem is the user is not here yet because we're loading.
[00:07:37] So if I were to, I'll show you what this looks like. So if I said, if is loading and I just return no, you're gonna see a huge flash, right? It's gonna be, can be pretty jarring if I do this, that flash right there, right? You don't want that, right, so probably don't want that flash.
[00:08:00] So returning those probably not the best case here, something a little more optimal. So I think a good thing here might just be you can just, for now, you can just put a question mark here cuz we're using type scripts and it'll kind of just note out. And then it'll just load, it'll never once, but you still get that undefined, undefined there, you see that?
[00:08:22] It's really quick but you still see right there, you saw that undefined, undefined right there because it's not there yet. So really what you probably wanna do is have like, you can bake it into the gradient layout where there's a spinner or something like that or a skeleton.
[00:08:40] We could probably do that. I think that's gonna take a little longer or maybe not, you can add a skeleton here, chakra has one. But yeah, I think that just comes down to what you and your company wants to do with the loading state. For me, I'm just gonna just question mark it for now.
[00:08:55] If we get some time, we can come back and make it look super dope, but I wanna get to actually playing the music. So we'll just do that and just have a sub-optimal first pass, I guess, but regardless, you do have an error here. If you do have an error here, then you gotta think of how you wanna handle that.
[00:09:14] So is, are you gonna show an error message to the user via pop up or something like that or navigate to an error page somewhere? But we're just optimizing for it to be there for now. And as far as image, users don't have images right now, we could do the same thing.
[00:09:30] We just did add avatar for images there. But because we don't have an image, uploading functionality, it would still just be one of these, like images you found online. So there's no point of doing that right now. We could get the information for the playlist here, if we wanted to do that, that'd be really cool.
[00:09:52] So we could go back and change the me functionality to also get the user's playlist count and we can send that back. So that's actually something that might be useful, so we're not just making this up. So let's do that. We could go back to the API, go to me, and right now, we're just sending back the user.
[00:10:14] But instead of just sending back the user, we can import prisma here. And we can say, let's get the playlist count, so we can say playlists. And I'm pretty sure we can just say, playlistsCount =, and you make this async, await prisma dot, let's do user. User dot, no, no, no, we need to do playlist, playlists dot.
[00:10:44] And you can see there's a count method, so you could say count, and this will just return a number, so we could say counts. And then where userId is user.id, so let's give us a playlist count, which is really cool. We can just verify that by logging this playlistsCount.
[00:11:07] So do that, I'll leave it here for a minute. We're just using the count method, which literally does like the same thing as find many. But instead of returning the things that are found in return the count, which I mean, you could just do yourself by doing .length.
[00:11:22] But if you had 100,000 things in the database, you don't wanna load that up in memory, things like that. So you're saving on that, but as far as the database is concerned, it's still looking up for the query. It's just not returning all the payload. So we got that, this thing is freaking out.
[00:11:42] I'm sure I reached maximum, here we go, connection, so I gotta restart. There we go. And now if we go back to the terminal, get past this key error that no one wants to look at, where is it at? Let me refresh this, there we go, there it is, I didn't see it.
[00:12:08] 10, so I have 10 playlist. So that totally works, now we're just gonna send that back with the user, so I'll say, let me get the user plus playlistCount. So we can go to index, and we can get rid of this 15 public playlists and we can replace this with a string, That says, user.playlistCount like that.
[00:12:52] It's not called playlistCount, what is it called? That is what it is called. PlaylistsCount, plural. There we go, so 10 public playlists.