Build a Fullstack Music App with Next.js Custom Hooks for Fetching Data

Transcript from the "Custom Hooks for Fetching Data" Lesson

[00:00:00]
>> Just to recap, we basically created that middleware. Which is super awesome on the edge to protect any routes, any page that we want it to be protected from being accessed from anyone that doesn't have a token. And yeah, it's very powerful, very good use of a new feature that the next thing [INAUDIBLE] team universal team came up with.

[00:00:22] So super thankful for that, because it's actually really hard to set up. And now what we'll do is, we got most of our authentication stuffs set in place. We got an API setup, we created that route to get the user called slash me. Next thing is we can go ahead and create the homepage that will use that API call to get the user, and fill out the homepage to look like this.

[00:00:49] So we'll make this page now, so we'll get on to the part of actually making the app. Now that we got all the foundational stuff out of the way, we can get on to the cool stuff. So we'll start working on this homepage where it has information about the user at the top.

[00:01:01] And it looks like it just has the top artists this month, which obviously we do not have an analysis to determine the top artists this month, seeing how our app only has three artists. Anyway, we'll just put all the artists there, but yeah, it'll look like this, and we'll make some API calls, and it'll be cool.

[00:01:17] So in order to do that, we need to make some helper functions first to assist in making these API calls. And this is just the way that I like to do it that i've learned along the way, so, again, this is just my thought process, and how i've done things in the past.

[00:01:34] Doesn't mean this the right way, or the only way or anything, is just my opinion. So I'm gonna walk you through how I do some of that. So, first thing we're gonna do is, go to this lib folder, and i'm gonna to make a new folder called Hooks, we're gonna write some custom hooks.

[00:01:50] If you never written a custom hook before, it's not that hard. It can be [LAUGH]. But yeah, it depends on what it is. So we're gonna make some custom hooks and using SWR. So we're gonna import use swr from swr. And I'll talk again more about what that is.

[00:02:10] And then we're gonna import our fetcher from fetcher. The first hook that we're gonna make is going to be hook to get the user, and then we're going to make another hook to get all the playlists, so we can populate the sidebar. Because right now on the sidebar, we have those fake playlists right?

[00:02:31] If we go back and look at our sidebar, there we go. I have these fake playlists, we're gonna use the real playlist that we seated in the database, and we're gonna pull those down. And we got to do all that client side, so we need some hooks for that.

[00:02:44] We don't need hooks, it's just the way that I like to do it, so you'll see why. Because it makes it so much easier with swr. So the first thing is we're gonna make one called useMe, and I just said that out loud and it sounded really bad.

[00:02:57] But [LAUGH] I'm also starting with the use word, and the API call is me, so it's useMe. Yeah useMe, and the way this is gonna work is first we are gonna use the swr hook inside of our custom hook. This is actually really intuitive, so you can say use swr.

[00:03:15] And the first argument to swr, is the cache key of where you wanna store. So let me describe SDR before I even get into that. SDR, the way that works is it's meant as a library to do data fetching. So it fetches some data, and and it stores it locally like Redux would, it stores it on your machine, okay?

[00:03:40] And then it works with you, and it's really cool API to figure out when to revalidate that data. Like I said, when you focus in and out of a browser, when you open up multiple tabs it'll sync the data. When you do a mutation, you wanna come back and update it manually, which we'll go back and do on one of these pages.

[00:03:59] It's basically that, some abstraction around that. So, the data doesn't have to come from an API, you just need to get the data from somewhere, and you need to give it a data fetching function. In our case, we have a fetcher function that we're gonna use to fetch the data.

[00:04:14] And the cache key, and the convention that we use for the cache keys usually just use a route. So for use of routes, API routes as the cache key, then we as users know that this was for the slash me route, this was for the slash playlist route.

[00:04:27] That's where this is stored, and it'll pass whatever is in here into our fetcher. Here's a second argument. So in this case, we'll just say slash me. So we wanna use STVR to go to slash me. It's gonna take this argument slash me, pass it to fetcher, and if we go look at fetcher, that's the first argument that it takes.

[00:04:50] It takes a URL, so it works out pretty well. And then the second argument is data. And we don't have any data here cuz we're just doing a get request, and then this is just gonna return an object that we're gonna structure. Here, we're gonna get the data, or we're gonna get an error.

[00:05:03] So it's either gonna be data, or it's either gonna be error, it's gonna be one of the two, not both. And then all we're gonna do is just return an object that has the user on it, I'm gonna call that data, not data transfer. It is loading, so i'm gonna get a loading state here, and i'm gonna say if there's not data, and there's not an error, then that means we're still loading.

[00:05:28] It either came back with data or it came back with error, if it didn't come back with either one of those, it's still loading. So loading is true, both of those are false. And then the last one, it just wanna see if there's an error. So, and also that's error, and that's it.

[00:05:43] That's a custom hook. Just an abstraction around useSWR. So now, anywhere in our app where we need to make an API call to get the user to slash me, we've got to use this hook. We don't have to do anything else. And whenever the user gets updated, we'll update this cache at slash me, and every component in the app will automatically get that update without having to make an API call.

[00:06:06] It will just get it immediately, which is really cool, that's STVR does. We could force it to make API calls when we revalidate, but we probably won't. The casting strategies are hard, there's no right or wrong, it depends. Got a question?
>> [INAUDIBLE] At the beginning of creating this circle, we talked about how it is just comments and text, but I think you actually have to use it or [INAUDIBLE] get angry.

[00:06:28]
>> Yeah, you actually have to use the keyword use, otherwise reacts like, nope, it is not gonna work. So yea, it does get angry. I do not know if that is development mode thing, like key and props, and that's why it's get angry and it still works in production.

[00:06:43] Or if that's the actual you have to do this all the time, or otherwise it's not gonna work. But yeah, you will get screamed at by react in the console if you don't put use in front of a hook. They are really crazy about that. The next one we wanna make is for the playlist, this is going to be very similar.

[00:07:01] We haven't made an API route for the playlist inside the API folders, but obviously we'll get there. But we're gonna go ahead and make the hook for it anyway. Assuming that the route will be called slash playlist, we're gonna make a hook for these playlists, so use playlists.

[00:07:21] And the way that that's gonna work is pretty much the same thing, we're gonna have data, we're gonna have error, we're gonna have UseSWR. That's gonna be slash playlists to a route that we haven't created yet on the API. And we're gonna pass in the fetcher. That's it, and then we're gonna do the same thing.

[00:07:41] We're gonna return playlists, which will be the data or the data then come back we'll make an array. So nothing breaks if we do a map. And then is loading, same thing, that'll be not data, and not error. And the last thing is error if there is an error, so we'll export this as well.

[00:08:09] So now, we have a hook for playlists. So anywhere we need to pull down playlists, which I can tell you right now, it's going to be in the sidebar. It's also gonna be around library, somewhere that shows you that there's multiple pages in this app, that shows you all your playlists or a certain amount of playlists.

[00:08:23] We can just use this hook, and STVR guarantee that we only make one call, even though we might be using in multiple places that only made one call, which is really cool. So like D dupe, it'll do all this stuff. It really does a lot of stuff, you should take a look at the docs, is pretty cool.

[00:08:40] I would never make a client side react app without using something like swr, or react query, one of the two. I just can't go back to whatever I was doing before that which was, Redux, bunks, sagas, things like that. So to me, this is much better. And this works with Graph QL as well because it doesn't care what this fetcher is.

[00:09:04] This fetcher can literally do anything, it could make a Graph QL call, it could not even make an API call at all. As long as it's some function that returns some data, it doesn't care. So, it doesn't even know that you're talking to an API, it has no idea.

[00:09:19] It just says hey, i'm gonna pass this argument to here, wherever this returns that's where i'm catching it, that's it, that's all it does. But it is designed for API calls in mind, and asynchronous fetchers, so as long as it's asynchronous.