Build a Fullstack Music App with Next.js Fetch & Render Data into Components

Transcript from the "Fetch & Render Data into Components" Lesson

[00:00:00]
>> Okay ,so the first thing we're gonna do is, we're going to go back to our sidebar and we're going to get the playlist. So we actually have like real playlist in there and not like the hard coded ones that we made before because obviously, we don't wanna do that.

[00:00:19] So it should be pretty easy, so if we go to the sidebar, we can go here, we can see that we have this play this here. All we got to do is import our usePlaylist. Thing now so I can say usePlaylists that's gonna import it for me at the top right there usePlaylists.

[00:00:36] And then now I can say const (play list) = usePlaylists like that. I can get rid of this playlist. And the other thing is now, I think our fake playlists were my assisting for now, data is type response, okay? Okay, once we the type check this let's do that and then we'll just say, data as any.

[00:01:09] There we go. So good. Okay, that'll solve that problem. Don't do this and [LAUGH] production team are you? But I don't wanna sit here and debug TypeScript all day if I said that was gonna be optional, alright. So playlists, and like I said before our my playlists were just strings so now this is an object so we need to, obviously fix this.

[00:01:35] So now I'll say this will be a playlist, and this will be a playlist.id. And this will be playlist.name. So we have the place ID, we have the playlist name. Now we got to make sure we're signed in with a user that has playlists which I see the user does.

[00:01:52] And we should see some playlists on the side. So let's give that a try and obviously, we didn't make the play this API so we should like try to get a 404 but just want to make sure that it's like making the requests we want to see what what happens.

[00:02:06] So let's sign in to that usertest.com and then password, enter it signs in, playlist, map is not a function and that's probably because I'm getting back an error here because we don't have a playlist routes, which is expected. So if we go back and look, we can see there it is.

[00:02:30] There's a 404 that I talked about, you get a 404 because we don't have the play this route. But if we look at the network tab, what I was trying to verify is that we actually just made a call to playlist. So our hook is working. It's making a call to API slash playlist.

[00:02:44] So all we got to do is gonna make this API routes, we'll get our playlists and we should be good to go Friends hooked up though. So let's do that. We'll head over to our API we'll make a new file here called playlists.TS And we'll fill this out to have our playlist.

[00:03:06] So the first thing is we'll import prisma from prisma because that's what we've been using. We'll import the validate routes cuz this is gonna be a validator routes we don't want people coming in here that don't have access to people that aren't authenticated to access this play this page so we'll do that.

[00:03:27] And then to actually get the playlist should be pretty simple so first we'll say, exports function or export default and then we'll just say validate routes, will pass another thing in here this will be an a sync function we have a request, so we have a response. We're not an add function anymore so we do have access to Prisma and things like that, that's why I'm using this it's just an API function And we just wanna get all the playlists for the user that's really all we wanna do so we could just say const playlist = awaits prisma.playlists.

[00:04:10] And then I mean, there's so many ways we can do this. We can go from the playlist and grab, all the playlists that have this user, we could go to the user and just grab all the playlists. There's no right or wrong way at this point, because they're both kinda index.

[00:04:28] So I think the best way might just do it from the playlist and then we'll just say, findMany where user ID = and then I'll get this third argument right here from this user User oops, user.id. So give me all the playlists where user ID = user.id. And then res.json send the playlists back.

[00:05:06] If you come from the user side, you can say like prisma.user, that find unique find the user by the user ID. And then you could do something like include, and you can include the playlists, which is really cool. We'll do some of that later. It gets really cool there.

[00:05:25] Which is really hard to do, if you have the right sequel, are using Mango? We need to go to our fetcher. And we need to resolve this. So what I need to do is right now basically fetches needs to be resolved is returning a response as a promise.

[00:05:39] So inside of the fetcher, need to do .then and then I'll get a response objects. I can just return res.json. And that'll resolve it. I can also do some really good error handling here too so, I can say something like if res.status is > 299 but, and res.status >399 and then like < 200.

[00:06:27] So I could do that, that'll throw an error. So, we'll say, throw new Error. So we'll throw an error message if it's greater than that or less than that. Otherwise do json, so we're good there and now we should get our playlists here. So there we go there's our playlist on the side it's not ordered it's like random.

[00:06:57] Okay, so we probably wanna order these cuz it just doesn't look good. So we can go back to our playlist function and in here we can do order by. And I want to order by the name and I can say ascending or descending. I'll say ascending, so now we're ordered by a name ascending and I can refresh and there we go.

[00:07:26] 10 has one in it so it's like there so obviously it's not perfect, but yeah. So we've got our playlist, we made our API call, we can verify, we look at the network, check out this fetch tap which is super cool. There it is. We get to 200.

[00:07:41] And, we get back our playlists here, which is really awesome. And all we had to do, was all that work. [LAUGH] I think this use Plato's like is really cool, because this is you don't have to think about anything now, you just use this whenever you wanna play this or use this whenever you wanna use it.

[00:08:04] It's very cool. I like abstracting things out of components, I hate like initiating and creating like API calls and the component just, I don't wanna deal with any of that. I want everything to be a component or I want it to be a hook, that's it. I don't want anything else in that component.

[00:08:18] If it's not that I'm gonna turn it into that cuz I don't wanna think about anything up
>> I don't know if I'm oversimplifying this, but so whenever we're creating custom hooks is usually the idea that we wanna use hooks but outside of a component, we wanted to use useSWR.

[00:08:36] You're gonna have to use it in every component, so we created a custom hook that can also run it because.
>> Exactly.
>> You couldn't just use a hook inside of a normal like function right?
>> Right.
>> Yeah.
>> There hasn't been a component yeah hooks only works in a functional component not even classical component.

[00:08:53] And that's because the way functional components work in react is that, the function itself is actually the render function. So you can think of it as as its own call, whatever reacts says this component has to re render that function gets executed again. So if you didn't have a hook and all your state were just like variables, your variables will get reset every time that component re renders.

[00:09:17] So to opt out of that rendering cycle it's basically tell react like hey, react I want you to watch these. I want you to watch these these values for me and the way you do that is with a hook. So hook is just you telling react to hey, please do not reset this I need you to watch this across re renders.

[00:09:35] Whereas in a classical component, you get that by default because there's a render method so everything is just regular JavaScript until you get to the render method. But the functional component the whole function is the render method so you got to opt out whereas in the classical point you opt in.

[00:09:51] So it's like backwards, so hooks was their solution to opting out.