Data Fetch and revalidate with SWR

hey guys and welcome back to another video in this video we're going to be covering three topics one a basic implementation of swr two how to stop the data from refreshing every time someone focuses on a page and three how to get fresh data when somebody updates data somewhere else in an application now if you do enjoy this video make sure to hit that subscribe button make sure to like and also comment anything you want to see about next js as that's going to be a primary focus for a few weeks so what i've done is have created a boilerplate set of code and what we're going to do is we're just going to use chakra ui to create a simple box or div that holds all of the data that we're going to create today swr was created by the guys behind for sale and next js so they all created this this remote data fetching library now swr is derived from the stale while revalidate which is basically a way to handle cash and invalidating that cash to get new data and swr first returns the data from cash then sends a fetch request to revalidate and finally comes up with the up-to-date data so for us that's great that means that our next js apps can be so fast that you can make a change and within milliseconds you'll get a response so what we're going to do is we're going to create a way to use the swr and to do that we need to import use swr and we're also going to import the mutate function which we'll get to later and while i'm here i'm just going to add in some chakra ui stuff so i can use that as we go along so the way that swr works is quite simple you can think of it just like a regular fetch in the sense that you make a call to it and data is returned in this example we want to get data from a local host that i have currently spun up that will return users two things we're going to need is data and error so swr has this built in so you don't actually have to worry about the error it will return that to you if there is one and then if there's data it will also return that so for here i actually have something running on localhost 3001 and this is from a previous video that i created on a simple api with resale using node and all it does is return some users and i made a slight modification that lets us save a new user so this in theory would work but what i want to do is actually handle the fetching of this in such a way that we can pass arguments to it and it will return a json every time versus returning the full data structure so now what you can do and a built-in feature is a comma here i'll write the word fetcher and by default it has one just called fetch but we're going to create our own and what we're going to do is we're going to call a constant lecture we're going to set it equal to args and what we're going to do then is take those arguments and fetch so you can do that by using the arrow here and writing the word fetch dot dot args and then response and finally set it to response.json and that's what we'll get back if we hit save here now that's all complete so now that we have this fetcher attached we can actually do something with the data we already have these two constants here we can actually check before we return any data inside of here we can actually check if the data is there or if there's an error so if you think this from an application standpoint what you could do in this scenario is say if there is no data return say a spinner and have that spinner going until the data is returned and if there's an error you can handle the error immediately so that a person's not just sat around trying to figure out why their screen is blank so all you need to do is do a couple if statements and if you write if no data return and then put whatever you want returned here so i'm just going to return the words i am loading and if there's an error we want to return there is an error so immediately before you've even got down here we've had a condition here that basically states we have data we'll go in here if there is no data we're just going to leave it loading if there's an error message we're going to write there's an error so now what we can do inside of here using list from shakra ui we're going to just do an unordered list here so to do that you just use the word disk we're going to map over the data and we're going to call it user because that's what they are and then using the arrow functionality we're going to essentially ask for each list item we're going to return the user and their location so for each list item we're going to need the key and that key is going to be equal to the user dot name then on top of that we're then going to actually return the data inside of here which will just be the user.name comma user dot location so in theory what will happen is it will go and get this from our database and return it to us so let's test this out first and see what happens so we're here we have an npm dev that we can run so we can flip over here and you can see that um immediately this has already been returned and if we hit shift f5 to get a full refresh you can quickly see in the top left hand corner there is i am loading now what's good about this is this data is immediately fetched at the beginning so if i hit ctrl r here and we see the refreshes in this side of the screen you can see here that there is a request here and that's going to our api and we are returning the data here and this is fantastic and this is exactly what we want so use swr has a feature that will grab the latest data as soon as somebody focuses back in the window so for example let's say a user has walked off and they've decided to make a cup of coffee they've then come back and you now have stale data well use swr will actually just refresh as soon as somebody clicks back in to the screen so i've actually clicked off the screen and clicked on my stream labs right now and i'm going to click back over here and say what happens now so i've clicked back over here and the last request is another one to the users swr has this feature called revalidate on focus and the reason behind it is is imagine if you went away and decided to get coffee and came back and your date was now stale but you don't know that as the user and the application doesn't know that either in theory that coupon code that was there before should be valid but somebody else at another location has used that coupon code and now it no longer exists or maybe this user right here james has been deleted out of the database and you wouldn't know so what it does is it makes a fetch and compares them and makes sure that nothing has changed and will update this screen if it has i've had this question a million times and that's how do i turn this off well what you do is inside of your code you can go ahead and after the fetch here you can open a set of braces and inside of that brace you're going to put in revalidate on focus and set it to false and then hit save now what will happen is if we go back to our regular screen and look what happens in the network what you'll see is that it'll stop so as you can see if i click here now no more requests are made doesn't matter if i click off and click on my obs and come back so now this data is stale and that's fine for the next example of what we're doing here we're going to use swr to revalidate this after we make a different request to an api and that's one of the features that swr has so what i'm going to do here is quickly create a button and inside of that button we're just going to say add user and that add user button on click is going to do something so on click we're going to make an asynchronous call and that asynchronous call is going to take something and upload it to our database and then we're going to force the screen to update so up here we're just going to quickly create a user and that user is going to equal um a name and we're going to call him james as well and the location is going to be somewhere else and the location here is going to be london so now we have this we can use this further down here so now we have this dummy user that we're going to add to our w database so we're going to use the same fetcher as above that we created i'm going to put in the same url and this is just going to take the post request instead of a get request similar to other apis you've probably seen on the internet so i'm going to take the method and we're going to say post and then we're going to just stringify that user so if i click this button it will update the user and add them to our list i've clicked the add user and we got a 200 back and you can see this is the request payload london and james but this screen didn't didn't do anything and if i hit refresh we can now see that this is here but it never updated our data and one that's because we obviously turned off the window focus but if i'm already focused on the window how do i get new data out the way that this works is there's a key that we're using every time we make a request and that key in our example is the url what we can do is basically tell it hey we want you to update this data i know there is new jr please update the screen you would think that you'd have to make a new request and that seems like a pain but luckily there is an option so after we've done this await here what we can do is type mutate and then we can just type in our url and what will happen is is once this is complete and we've updated our database we will call mutate and it will go and check this data and essentially revalidate it and see if it's actually new data and if there is it will re-render the page for us giving us the freshest data so i've added the mutate and what i'm going to do is i'm actually going to change this to somebody else so let's say chris and hit save so that we have chris now then i'm going to flip back into the chrome window and we're going to look at it and see how this works so right now we just have james george steve and james again who lives in london i'm going to click this button and it's going to update our guy and add in chris then what we should see is the page actually render the new data so i'm going to click it and as you can see this part didn't actually do anything it just popped this on the bottom and that's because it does a comparison and only gives us the new data so back into our console and if we refresh this and i'm going to add chris and it's going to add him again because i don't have any checks here and so you can see that we do do a request and that does the payload and immediately afterwards we do a request to the users as a get and in our response we get the full thing with all the new data and as you can see chris is here at the end so in this video we covered three topics one how to use swr two how to stop it from refreshing every time we focus on the page and three how to get fresh data once somebody makes a call to an api and we know that there is fresh data using the mutate function now this is going to be a series of videos so i'm planning to cover more things using swr and next.js in general so if there's something in particular that you want to see leave a comment below until the next video see ya

Channel: James Perkins

Views: 11,597

Keywords: Data Fetch with SWR, react hooks, ssr data fetching, swr next js, data fetching next js, data fetching react hooks, reactjs tutorial for beginners 2020, react tutorial project, react fetch, react tutorial, web development tutorial, web development, next js fetch data from api, next js for beginners, web development 2020, react hooks redux, Data fetch iwth swr, reactjs tutorial, nextjs tutorial

Id: F1o_0umlXbU

Length: 14min 51sec (891 seconds)

Published: Tue Aug 25 2020