1 00:00:00,050 --> 00:00:00,380 All right. 2 00:00:00,380 --> 00:00:06,830 And once we know how we can add error element to pretty much any page, now let's set up our first query. 3 00:00:06,830 --> 00:00:10,220 And again, please, let's focus on the main task. 4 00:00:10,220 --> 00:00:13,460 We want to cache our requests. 5 00:00:13,460 --> 00:00:17,660 So if we navigated to a stats page, we made a request. 6 00:00:17,690 --> 00:00:23,570 We want to cache it for five minutes, one minute, whatever, whatever value you set up in App.jsx, 7 00:00:23,780 --> 00:00:25,030 that is irrelevant. 8 00:00:25,040 --> 00:00:30,830 I just don't want to keep making those requests pretty much every time I navigate to the page. 9 00:00:30,830 --> 00:00:36,620 Now, for starters, we will need a hook and the hook name is use query and guess what? 10 00:00:36,620 --> 00:00:38,240 It's coming from React Query. 11 00:00:38,270 --> 00:00:41,540 Now I do want to fix this since we are. 12 00:00:42,160 --> 00:00:45,550 Familiar how the element property works. 13 00:00:45,730 --> 00:00:47,620 Then let's go with. 14 00:00:48,210 --> 00:00:49,110 Your query. 15 00:00:50,400 --> 00:00:52,940 I said it's coming from React Query. 16 00:00:52,940 --> 00:00:56,770 And for now we'll just set up here in the component. 17 00:00:56,780 --> 00:01:00,920 And yes, eventually we'll also do that in the loader. 18 00:01:00,920 --> 00:01:07,430 And actually, just so you see that everything works, here's what I want to do from the loader. 19 00:01:07,430 --> 00:01:11,690 I will return null so we won't invoke this functionality. 20 00:01:11,690 --> 00:01:12,980 Please keep that in mind. 21 00:01:12,980 --> 00:01:18,980 So we're not prefetching we're not doing this before the page loads. 22 00:01:18,980 --> 00:01:23,630 Essentially we'll do it the old fashioned way in React component. 23 00:01:23,660 --> 00:01:28,430 Now of course, since we're returning a null, this is also not going to make sense. 24 00:01:28,460 --> 00:01:31,340 Now as far as these returns, well, they will also break. 25 00:01:31,340 --> 00:01:31,910 Correct. 26 00:01:31,910 --> 00:01:35,180 So therefore, let's just go with some hardcoded value. 27 00:01:35,330 --> 00:01:41,090 And of course, eventually we'll have functionality which takes care of these values as well. 28 00:01:41,090 --> 00:01:46,130 So if I navigate back right now again, I'm going to go with explore app stats. 29 00:01:46,130 --> 00:01:48,890 I should only see the heading one. 30 00:01:48,890 --> 00:01:52,050 So again, we go back to the component. 31 00:01:52,830 --> 00:01:55,260 We want to set up some kind of variable. 32 00:01:55,260 --> 00:01:57,480 In my case, it's going to be response. 33 00:01:57,540 --> 00:02:00,360 We want to set it equal to use query. 34 00:02:00,390 --> 00:02:01,410 So that's the hook. 35 00:02:01,440 --> 00:02:04,320 And inside of it, we want to pass in the object. 36 00:02:04,590 --> 00:02:07,540 Now, inside of the object, there's going to be two properties. 37 00:02:07,560 --> 00:02:09,600 First one is going to be query key. 38 00:02:09,630 --> 00:02:18,270 So essentially think of this as some kind of identifier, because later on we'll also invalidate some 39 00:02:18,270 --> 00:02:25,080 queries because, well, let's say if we have cached the jobs request. 40 00:02:25,110 --> 00:02:32,790 If I add a job, I kind of want to invalidate, otherwise I'll always get back those cached results. 41 00:02:32,790 --> 00:02:38,340 And if this again sounds iffy, don't worry, we'll cover that a little bit later on. 42 00:02:38,340 --> 00:02:41,820 So in my case I'm going to go with stats and yes, the syntax is following. 43 00:02:41,850 --> 00:02:46,950 Essentially we go here with the array syntax. 44 00:02:46,950 --> 00:02:54,130 So we go here with the square brackets and then we provide string values because later when we set up 45 00:02:54,130 --> 00:03:01,390 that jobs query, remember we have a form and in the form we have potential values for job status, 46 00:03:01,390 --> 00:03:02,890 jobs type and all that. 47 00:03:02,890 --> 00:03:05,290 And of course we do want to add them over here. 48 00:03:05,350 --> 00:03:08,480 Otherwise, well, our functionality is not going to work. 49 00:03:08,500 --> 00:03:12,360 Again, something we're going to cover later, just for now, keep that in mind. 50 00:03:12,370 --> 00:03:12,880 Yes. 51 00:03:12,880 --> 00:03:14,710 Essentially we'll have this syntax. 52 00:03:14,830 --> 00:03:17,500 Then we want to go with query function. 53 00:03:17,830 --> 00:03:21,880 And when it comes to query function, we want to return a promise. 54 00:03:21,910 --> 00:03:26,170 As a side note, I messed up over here, so this is not a query function. 55 00:03:26,170 --> 00:03:28,150 This is a query key. 56 00:03:28,180 --> 00:03:29,180 My apologies. 57 00:03:29,180 --> 00:03:34,570 So the property you're looking for is query key, and this is the query function again property, which 58 00:03:34,570 --> 00:03:36,250 is looking for the promise. 59 00:03:36,280 --> 00:03:37,990 Now where we can get our promise. 60 00:03:37,990 --> 00:03:46,410 Well, remember, if we go with custom fetch and get and then provide the URL, we will get back a promise. 61 00:03:46,420 --> 00:03:48,400 That's what Axios returns. 62 00:03:48,400 --> 00:03:50,800 So let's set up our function. 63 00:03:50,800 --> 00:03:52,360 I'm going to go with my arrow one. 64 00:03:53,120 --> 00:03:54,890 Then custom fetch. 65 00:03:55,070 --> 00:03:55,730 And you know what? 66 00:03:55,730 --> 00:03:59,600 I think I can just utilize this one over here. 67 00:03:59,720 --> 00:04:02,360 So I'll just copy and paste. 68 00:04:02,360 --> 00:04:03,800 Set it up over here. 69 00:04:04,100 --> 00:04:04,640 Good. 70 00:04:04,640 --> 00:04:06,680 I have my function now. 71 00:04:06,680 --> 00:04:09,710 It's complaining right now that there's some kind of syntax bug. 72 00:04:09,740 --> 00:04:12,170 Of course, since I don't have the value. 73 00:04:12,170 --> 00:04:12,740 So. 74 00:04:12,740 --> 00:04:13,570 You know what? 75 00:04:13,580 --> 00:04:14,570 Let me add it here. 76 00:04:14,570 --> 00:04:17,829 Just so we don't have any bugs. 77 00:04:17,839 --> 00:04:24,530 And now let's just log this response and what's super important, take a look at the first value. 78 00:04:24,530 --> 00:04:28,130 So let me navigate back to my browser. 79 00:04:28,850 --> 00:04:31,120 Let me take a look at the console. 80 00:04:31,130 --> 00:04:31,520 You know what? 81 00:04:31,520 --> 00:04:33,170 I'll clean everything. 82 00:04:33,170 --> 00:04:37,700 Let's refresh and notice we have this initial value. 83 00:04:37,700 --> 00:04:44,780 So if we take a look at this response, we get this giant object with a bunch of properties and we'll 84 00:04:44,780 --> 00:04:45,860 use some of them. 85 00:04:46,480 --> 00:04:48,180 We'll focus on his error. 86 00:04:48,190 --> 00:04:52,180 So this one essentially is false initially. 87 00:04:52,180 --> 00:04:55,480 But if there's an error, yes, it's going to be true. 88 00:04:55,510 --> 00:04:57,460 Same goes for is loading. 89 00:04:57,820 --> 00:05:01,200 Initially, it's true, but then it's going to be actually false. 90 00:05:01,210 --> 00:05:04,960 And then lastly, our data is located over here. 91 00:05:04,990 --> 00:05:06,250 Now, check it out. 92 00:05:06,250 --> 00:05:09,610 Initially, this is undefined why it's so important. 93 00:05:09,640 --> 00:05:15,460 Well, because remember, we have this functionality where we're basically pulling out the default stats 94 00:05:15,460 --> 00:05:21,520 and monthly applications and JavaScript will complain if we'll try to do this. 95 00:05:22,330 --> 00:05:28,820 With undefined and therefore when it comes to react query, we need to be more careful, I should say. 96 00:05:28,840 --> 00:05:32,320 So then let's navigate back to our console. 97 00:05:32,320 --> 00:05:35,440 And now let's take a look at our last log. 98 00:05:35,440 --> 00:05:40,870 And as a side note, the reason why we have so many logs is because we have the strict mode enabled. 99 00:05:40,870 --> 00:05:41,830 And you know what? 100 00:05:42,010 --> 00:05:44,920 I'll actually disable it right now. 101 00:05:44,920 --> 00:05:48,220 So in order to do that, we want to navigate to main JS. 102 00:05:48,910 --> 00:05:50,260 Notice the strict mode. 103 00:05:50,500 --> 00:05:52,630 I'll just set it up as a react fragment. 104 00:05:52,660 --> 00:05:55,240 That's one of those things with React strict mode. 105 00:05:55,270 --> 00:06:01,480 Essentially during development, it just provides a bunch of logs and this is the case where I don't 106 00:06:01,480 --> 00:06:02,140 want it. 107 00:06:02,170 --> 00:06:07,240 So let me navigate back over here and I'm going to restart everything. 108 00:06:08,460 --> 00:06:11,730 Again, I'm going to go with my test user. 109 00:06:11,760 --> 00:06:12,960 Let's take a look at the stats. 110 00:06:12,960 --> 00:06:14,430 And now I only have two logs. 111 00:06:14,430 --> 00:06:18,270 So this is the initial value and this is what we get back. 112 00:06:18,300 --> 00:06:22,530 Again, if everything is correct, we should have our data over here. 113 00:06:22,530 --> 00:06:25,080 So we have data and notice. 114 00:06:25,080 --> 00:06:27,900 So this is going to be our Axios response. 115 00:06:27,930 --> 00:06:28,710 Correct? 116 00:06:28,710 --> 00:06:35,580 And this is that funny thing where React Query uses data, then Axios uses data and then we have our 117 00:06:35,580 --> 00:06:36,300 default stats. 118 00:06:36,300 --> 00:06:44,250 So in the following video, we will refactor our code a little bit, basically our query function. 119 00:06:44,250 --> 00:06:52,170 But for now, yes, it's going to be data dot data and then we have this default stats and monthly applications. 120 00:06:52,170 --> 00:06:58,410 So now let's see how typically we would set up the query request. 121 00:06:58,410 --> 00:07:05,100 Again, I'm saying typically because our setup is going to be different, we have a loader and that 122 00:07:05,490 --> 00:07:06,750 changes things. 123 00:07:06,750 --> 00:07:12,790 So this would be just typical kind of react component setup where we have use query and yes, we're 124 00:07:12,790 --> 00:07:16,270 not using any use effect, none of that stuff. 125 00:07:16,270 --> 00:07:22,090 We just use React query and essentially we need to set up this object and pretty much we're good to 126 00:07:22,090 --> 00:07:22,530 go. 127 00:07:22,540 --> 00:07:28,540 Now, of course we want to handle two things we want to handle when we're loading, which is of course, 128 00:07:28,540 --> 00:07:36,100 initially, and then also if there is an error, again, we will remove this code in the following videos 129 00:07:36,100 --> 00:07:38,080 because we will use the loader. 130 00:07:38,080 --> 00:07:42,660 But I do want to make sure we are all on the same page. 131 00:07:42,670 --> 00:07:48,790 So in here, since I know that there's going to be that giant object, well we can nicely destructure 132 00:07:48,790 --> 00:07:49,420 correct. 133 00:07:49,420 --> 00:07:57,120 So I can say is loading then I can also look for is error and I can also look for my data. 134 00:07:57,130 --> 00:07:59,170 So now let me remove this. 135 00:07:59,980 --> 00:08:03,140 And let's set up some temporary conditions. 136 00:08:03,160 --> 00:08:05,630 I'll say if it's loading, what do I want to do? 137 00:08:05,650 --> 00:08:09,400 Well, let me just return over here. 138 00:08:09,430 --> 00:08:10,660 A heading for. 139 00:08:11,450 --> 00:08:12,860 And I'll go loading. 140 00:08:13,190 --> 00:08:13,640 Loading. 141 00:08:13,670 --> 00:08:14,420 Dot, dot, dot. 142 00:08:14,450 --> 00:08:17,000 Now, if there is. 143 00:08:18,110 --> 00:08:18,760 An error. 144 00:08:18,770 --> 00:08:19,740 What do I want to do? 145 00:08:19,780 --> 00:08:23,900 Well, pretty much the same thing I'll say is error. 146 00:08:24,530 --> 00:08:29,840 And now I want to work with the data again in order to access this data. 147 00:08:31,010 --> 00:08:34,730 I want to do it after is loading or is error. 148 00:08:35,270 --> 00:08:41,929 Otherwise, if you'll try to structure the default stats and monthly applications out of the data when 149 00:08:41,929 --> 00:08:45,510 it's undefined, you will have a big fat error. 150 00:08:45,530 --> 00:08:52,250 So in here, essentially we're looking for the same thing default stats, then monthly applications. 151 00:08:52,250 --> 00:08:53,840 And that is equal to what? 152 00:08:53,870 --> 00:08:58,310 Well, remember, it's data dot and then data again. 153 00:08:58,460 --> 00:09:04,850 Please keep in mind we want to do this over here and then once we have access to it, well, now, of 154 00:09:04,850 --> 00:09:08,300 course I can actually set up my proper return. 155 00:09:08,300 --> 00:09:08,800 Right? 156 00:09:08,810 --> 00:09:15,320 So now let's navigate back and notice a few interesting things in the browser and settled. 157 00:09:15,560 --> 00:09:18,770 For some reason I kept this as loading. 158 00:09:18,770 --> 00:09:19,970 It should be an error. 159 00:09:19,970 --> 00:09:21,590 So we navigate back. 160 00:09:22,390 --> 00:09:23,950 Let me start from scratch over here. 161 00:09:23,950 --> 00:09:29,110 Let me actually refresh and you'll notice something pretty interesting. 162 00:09:29,260 --> 00:09:33,100 Now, of course, everything is going to happen fast, and therefore, I'm going to tell you what's 163 00:09:33,100 --> 00:09:36,470 going to happen and then we'll take a look at it together. 164 00:09:36,490 --> 00:09:40,390 So essentially, there's going to be no loading spinner like we have in all jobs. 165 00:09:40,390 --> 00:09:40,880 Why? 166 00:09:40,900 --> 00:09:43,300 Well, because we're not prefetching anymore. 167 00:09:43,330 --> 00:09:45,040 Again, we're not making that request. 168 00:09:45,040 --> 00:09:46,950 So that's the first thing. 169 00:09:46,960 --> 00:09:54,700 Then second, the first time we navigate to stats, we'll see that loading for split second and then 170 00:09:54,700 --> 00:09:55,900 we'll get our stats. 171 00:09:56,390 --> 00:10:00,260 Now with React query, we'll cache this result. 172 00:10:00,260 --> 00:10:07,640 So when we come back to the same page, within those next five minutes, actually data is going to be 173 00:10:07,640 --> 00:10:08,570 there instantly. 174 00:10:08,570 --> 00:10:14,410 And you can clearly see that if you take a look at the network requests. 175 00:10:14,420 --> 00:10:15,790 So let's take a look. 176 00:10:15,800 --> 00:10:21,080 Notice stats and at the moment it complains that there was an error. 177 00:10:21,470 --> 00:10:22,640 Let me see. 178 00:10:23,000 --> 00:10:24,680 I have in the console. 179 00:10:25,600 --> 00:10:27,220 Let me scroll up. 180 00:10:27,930 --> 00:10:32,100 Says reading data cannot read properties of undefined. 181 00:10:32,190 --> 00:10:34,570 As a side note, this is what I was talking about. 182 00:10:34,590 --> 00:10:40,890 So essentially, if we're trying to get data out of undefined, it's not going to work. 183 00:10:40,920 --> 00:10:44,490 Now, the reason for that is because I forgot the returns over here. 184 00:10:44,490 --> 00:10:45,140 My bad. 185 00:10:45,150 --> 00:10:49,230 But yes, effectively this is the error. 186 00:10:49,260 --> 00:10:53,150 You'll see if you'll try to access both of them right before. 187 00:10:53,160 --> 00:10:59,430 So again, let me refresh, you know what, actually, let me refresh and start from the different page 188 00:10:59,430 --> 00:11:00,630 and same deal. 189 00:11:00,660 --> 00:11:02,940 Now let's navigate to stats. 190 00:11:02,970 --> 00:11:04,710 Notice this little loading. 191 00:11:04,830 --> 00:11:08,340 So essentially we made a request to the stats page. 192 00:11:08,340 --> 00:11:09,110 Correct. 193 00:11:09,120 --> 00:11:10,350 But now check it out. 194 00:11:10,350 --> 00:11:15,240 I go to all jobs, I navigate back and there is no request. 195 00:11:15,240 --> 00:11:16,590 So that's the first thing. 196 00:11:16,590 --> 00:11:20,040 And second, notice how data gets there instantly. 197 00:11:20,040 --> 00:11:20,760 Why? 198 00:11:20,910 --> 00:11:24,090 Again, because we have cached it with React query. 199 00:11:24,120 --> 00:11:27,580 So now if I take a look at the devtools, check it out. 200 00:11:27,580 --> 00:11:30,520 This is the query which currently is fresh. 201 00:11:30,520 --> 00:11:37,240 What it means is that it's valid and then in five minutes or whatever time you set up, it's not going 202 00:11:37,240 --> 00:11:38,310 to be valid anymore. 203 00:11:38,320 --> 00:11:45,970 And then of course, once the user navigates to the stats page, we will make another request to get 204 00:11:45,970 --> 00:11:47,440 the latest data. 205 00:11:47,440 --> 00:11:54,430 And with this in place, we have successfully made our first request with React Query.