Simple Refetching

[00:00 - 00:11] In the last module, the main focus was on pre-vegging and caching. And in this module, we're going to focus on addressing the bug with race conditions and network waterfalls.

[00:12 - 00:22] Now, I know the subject of this specific lesson is refetching. But trust me, refetching is a necessary step to address the race conditions bug .

[00:23 - 00:28] Let me explain. Let's imagine you've created a sign up page with a username field.

[00:29 - 00:46] Each time the user enters a username, an event is triggered to check the server to see if the name is available. Now, if we use the use effect hook to make that request, then that means each time a character is typed, a new request would be made.

[00:47 - 00:57] Meaning that multiple requests can be made and the response that takes the longest to return will be the one that's used. Let me explain.

[00:58 - 01:17] So here in this chart, we can see that JOHN, so John, is the slowest call. So that means even though the user has typed in a value of John-117, please ignore the lower case over here, the response from this value will be overwritten by the response from this value.

[01:18 - 01:30] This means that the user may see an error message saying that the name John has already been taken when the user actually typed in the name John-117. This is the race condition bug.

[01:31 - 01:41] Now, usually the latest response should be the latest one that's fresh, but it 's difficult to guarantee that. You never know what could be happening to the user's network.

[01:42 - 02:01] The best way to address this issue is to cancel previous requests before or when in your request is made. So over here on this graph, we can see that all these requests are in blue because they have been cancelled, which means the only response that will show to the user is the latest one.

[02:02 - 02:22] With our current data loader, we can't do this since response data is saved to the cache and there's no way to overwrite that or make new requests. This means we need to implement a way to make new requests that can overwrite the value that's inside the cache and that is where refetching comes in.

[02:23 - 02:34] Refetching means that we make a new request even if there's already data in the cache and this new request data will overwrite the old cache data. Cool, I hope that makes sense.

[02:35 - 02:49] Let's go ahead and implement this in the code. Inside our data loader file, let's scroll down to the bottom where our format data response is and first I'm going to reformat our default data variable so that things are a bit easier to read.

[02:50 - 03:00] Now I'm going to add a new property at the end. So after data online 39, I'm going to hit enter and create a new property called refetch.

[03:01 - 03:03] This is going to be a function. So let's add parentheses.

[03:04 - 03:12] I'm going to create an arrow function here and add curly braces. Now what our refetch function needs to do is first set the state to loading.

[03:13 - 03:23] So whatever the key is, change that status to loading and make the payload null . Then run the prefetch data function again with a key and function argument.

[03:24 - 03:29] So let's go ahead and write that code. Online 41, let's write data cache.

[03:30 - 03:45] Got set and add parentheses. Then we'll give it an argument of key comma and we'll give it an object of status which will be loading and then payload which will be null.

[03:46 - 03:54] Next we'll run the prefetch data function with parentheses and we'll give it two arguments of key and function. Cool.

[03:55 - 04:03] Now you may be wondering where are we going to get the key and function data from? Well, we just have to change the argument online 35.

[04:04 - 04:15] So at the end of line 35, we're going to go into the parentheses and write key and write function. Now let's go ahead and change our use data hook to add these new arguments.

[04:16 - 04:26] So we're going to scroll up in our code until we get to our use data function which is online five. And what we can do online five is give it a function argument.

[04:27 - 04:36] And then online 16, we can pass in the key and function arguments as well. Now you may be wondering why do we need a function argument online five?

[04:37 - 04:51] Well, this is because when we refetch the data, we need to know what function to refetch the data with. Currently the code isn't smart enough to know that we have a prefetch function in the main.dsx file.

[04:52 - 05:03] So we have to give it a function to run to fetch the data again. Now I've noticed that based on the way I've written the code, we actually don't need if statement online 11.

[05:04 - 05:13] Let me explain. This is because when the code first runs, if there's nothing in the cache that belongs to that key, then the payload is set to null.

[05:14 - 05:26] And because we're already getting the data from the cache, where the data is sent back to the client, then the payload will be null and the status is loading. And when there's data, the status and the payload will change.

[05:27 - 05:41] So without this if statement, the response by default won't have any data. And then it will have data and if the data inside the cache has a status of error or success, then the data will be returned.

[05:42 - 05:44] So we can get rid of this code. Nice.

[05:45 - 05:51] And that should be it. Now let's go ahead and make a few changes to our Pokemon.js file.

[05:52 - 06:10] First we can delete the code online 17 that forces a promise rejection and we can comment out line 17 and line 18. Now to show you visually that the refetches are working, let's change the amount fetched so the limit at the end of line 17 each time the data is being fetched.

[06:11 - 06:27] So online 16 inside the parentheses, we're going to give it an argument of a mount, which will have a default value of 150. Then online 17, let's get rid of 150 in here and then add a dollar sign and credit braces and we'll give it the value of a mount.

[06:28 - 06:39] Now let's go ahead and create a refetch button in our app, which will run the refetch function. In our home component online eight, let's add a new variable after error.

[06:40 - 06:48] So we're going to add comma and write refetch, which will expose our refetch function. But in order for our refetch to work, we need to pass a function argument.

[06:49 - 07:07] So after the key in our youth data, let's add a comma and then we're going to add some parentheses and an arrow function and here we're going to run our get Pokemon function. Let's wrap the text so we're not scrolling horizontally and let's double check that the get Pokemon function is being imported correctly.

[07:08 - 07:22] Let's copy the get Pokemon function here and paste it in the destructured line online five after the get Pokemon details. Now let's set a random limit between one and ten whenever the refetch button is clicked.

[07:23 - 07:42] So at the end of line seven, hit enter and we're going to create a new variable called random limits. And this is going to equal math dot floor and inside the parentheses, we're going to write math dot random, then we'll add another set of parentheses, we'll times it by 10 and then add one.

[07:43 - 07:59] So this should create a random number between one and ten. Now we can pass the random limit variable as an argument inside get Pokemon's, which means each time we call our refetch function, it should run the fetch function with a different limit value.

[08:00 - 08:16] Now, I'm aware that the random limit variable could have the same next value as the previous one, but for now we'll leave it since you want to keep things simple in this lesson. Let's hold down in this code and below the H1 online 20, we're going to hit a button.

[08:17 - 08:24] We're going to hit enter, write button. And we're going to give this button a class name of details.

[08:25 - 08:40] So she wanted to have that same teal color as the other buttons and we'll give it an on click event handler of refetch and we'll give it the text of refetch as well . But we also want to display the number that it should refetch.

[08:41 - 08:48] So here we're going to add parentheses and then we're going to add curly braces and then we're going to add random limits. Cool.

[08:49 - 08:52] Now let's test this in the browser. Okay.

[08:53 - 09:08] You can see that by default we have 150 Pokemon fetchs, so I can scroll down and we can see if we have loads of Pokemon. But if I scroll up to the top and click on our refetch button, we should just see two because it's done a refetch of two Pokemon and now it's eight.

[09:09 - 09:24] So if I click refetch again, we have eight Pokemon and we could even click on V D's details and go back to our Pokemon list page and we should still see a Pokemon because that is the value that has been saved in our cache. Nice.

[09:25 - 09:30] Now I think we're ready to go ahead and fix the bug with raised conditions. So let's do that in the next lesson.