1 00:00:01,170 --> 00:00:05,190 ‫So with our React Query client in place, 2 00:00:05,190 --> 00:00:08,280 ‫let's now start to use it in order to fetch 3 00:00:08,280 --> 00:00:11,883 ‫and manage our cabin data from Supabase. 4 00:00:13,350 --> 00:00:18,350 ‫So instead of manually fetching the data in a use effect 5 00:00:18,510 --> 00:00:23,013 ‫like we did here, we will now let React Query do this work. 6 00:00:23,880 --> 00:00:25,353 ‫So let's remove this. 7 00:00:26,190 --> 00:00:29,010 ‫Also, let's remove this image from here. 8 00:00:29,010 --> 00:00:32,370 ‫And then now here we will want to display 9 00:00:32,370 --> 00:00:35,370 ‫a table of all our cabins. 10 00:00:35,370 --> 00:00:38,220 ‫So therefore we have a component right here 11 00:00:38,220 --> 00:00:41,300 ‫in our cabins that is called CabinTable. 12 00:00:42,210 --> 00:00:45,540 ‫Now, we don't have the actual component here yet, 13 00:00:45,540 --> 00:00:48,360 ‫but we have two styled components. 14 00:00:48,360 --> 00:00:51,270 ‫And so let's now use these to create a table, 15 00:00:51,270 --> 00:00:55,710 ‫and of course, using React Query to fetch the cabins data 16 00:00:55,710 --> 00:00:57,183 ‫for that table. 17 00:00:59,640 --> 00:01:02,643 ‫So let's create ourselves our new component. 18 00:01:04,710 --> 00:01:07,023 ‫For now here, this doesn't really matter. 19 00:01:07,860 --> 00:01:11,670 ‫And then let's immediately also import it right here 20 00:01:11,670 --> 00:01:13,593 ‫into the cabins page. 21 00:01:14,850 --> 00:01:18,180 ‫So let's create ourselves another row, 22 00:01:18,180 --> 00:01:20,710 ‫even though this one will only contain 23 00:01:21,810 --> 00:01:22,773 ‫the CabinsTable. 24 00:01:25,980 --> 00:01:28,773 ‫Or actually, just CabinTable. 25 00:01:30,744 --> 00:01:34,407 ‫Then here, we don't need this. We no longer need this. 26 00:01:35,670 --> 00:01:38,613 ‫And now we want to import that CabinTable, 27 00:01:41,910 --> 00:01:43,380 ‫just like this. 28 00:01:43,380 --> 00:01:44,820 ‫And now here we have a problem 29 00:01:44,820 --> 00:01:47,760 ‫that we should return only one element. 30 00:01:47,760 --> 00:01:51,093 ‫And remember how we said that in our layout, 31 00:01:52,860 --> 00:01:56,670 ‫so let's actually check that out because this is important. 32 00:01:56,670 --> 00:01:59,310 ‫So in our layout, we want the current page 33 00:01:59,310 --> 00:02:02,460 ‫to be directly inside of the main. 34 00:02:02,460 --> 00:02:04,110 ‫So all the components should be 35 00:02:04,110 --> 00:02:06,510 ‫right inside this main component. 36 00:02:06,510 --> 00:02:09,360 ‫That's why we have it here in the AppLayout. 37 00:02:09,360 --> 00:02:12,090 ‫And therefore, in each of the pages, 38 00:02:12,090 --> 00:02:15,180 ‫we should not return an extra element 39 00:02:15,180 --> 00:02:19,230 ‫but really, just return basically all the elements 40 00:02:19,230 --> 00:02:21,570 ‫from there separately. 41 00:02:21,570 --> 00:02:24,840 ‫So this then here basically creates both the row, 42 00:02:24,840 --> 00:02:27,843 ‫and this other row, instead of one big component. 43 00:02:29,010 --> 00:02:34,010 ‫So here we will have later on the Filter and Sort. 44 00:02:34,560 --> 00:02:37,710 ‫So just to let us know of that already. 45 00:02:37,710 --> 00:02:40,230 ‫And so we can close this file 46 00:02:40,230 --> 00:02:42,030 ‫and now start working here. 47 00:02:42,030 --> 00:02:45,333 ‫And so now it's time to use React Query. 48 00:02:46,470 --> 00:02:49,050 ‫So the most important function that we're going to use 49 00:02:49,050 --> 00:02:53,913 ‫all the time is called the useQuery custom hook. 50 00:02:56,100 --> 00:02:59,790 ‫So useQuery, and now here we need to pass in an object 51 00:02:59,790 --> 00:03:01,830 ‫with two things. 52 00:03:01,830 --> 00:03:04,050 ‫First, the queryKey. 53 00:03:04,050 --> 00:03:07,470 ‫And so this will uniquely identify this data 54 00:03:07,470 --> 00:03:09,020 ‫that we're going to query here. 55 00:03:11,070 --> 00:03:13,110 ‫So this can be a complex array, 56 00:03:13,110 --> 00:03:15,900 ‫or it can just be an array with a string, 57 00:03:15,900 --> 00:03:18,843 ‫but it needs to be an array like this. 58 00:03:20,070 --> 00:03:24,000 ‫So this cabin is what we will later also see insight 59 00:03:24,000 --> 00:03:26,460 ‫or React Query dev tools. 60 00:03:26,460 --> 00:03:29,640 ‫And again, this is what identifies each data. 61 00:03:29,640 --> 00:03:33,180 ‫And so if later we would useQuery again on another page 62 00:03:33,180 --> 00:03:36,540 ‫with this exact key, then the data would be read 63 00:03:36,540 --> 00:03:39,243 ‫from the cache as we learned at the beginning. 64 00:03:40,410 --> 00:03:45,060 ‫Now, right, and second is the actual query function. 65 00:03:45,060 --> 00:03:48,480 ‫And so this is the function which, as the name says, 66 00:03:48,480 --> 00:03:51,330 ‫is responsible for actually querying. 67 00:03:51,330 --> 00:03:55,260 ‫So basically for fetching the data from the API. 68 00:03:55,260 --> 00:03:57,480 ‫Now what's important is that the function 69 00:03:57,480 --> 00:04:00,783 ‫that we specify here needs to return a promise. 70 00:04:01,650 --> 00:04:04,650 ‫So in the most simple form, we could, for example, 71 00:04:04,650 --> 00:04:06,810 ‫use the fetch API here, 72 00:04:06,810 --> 00:04:10,950 ‫and then do some request to some URL here. 73 00:04:10,950 --> 00:04:13,680 ‫However, this is not what we're going to do. 74 00:04:13,680 --> 00:04:16,290 ‫Instead, we will again use the function 75 00:04:16,290 --> 00:04:17,703 ‫that we already created. 76 00:04:18,660 --> 00:04:22,440 ‫So this getCabins function here is an async function, 77 00:04:22,440 --> 00:04:24,870 ‫and therefore it returns a promise. 78 00:04:24,870 --> 00:04:27,120 ‫And that promise, when resolved, 79 00:04:27,120 --> 00:04:30,360 ‫will return this data here, right? 80 00:04:30,360 --> 00:04:33,600 ‫So that's how promises and async/await work. 81 00:04:33,600 --> 00:04:35,910 ‫And so this data is standard one 82 00:04:35,910 --> 00:04:38,163 ‫that will be stored into the cache. 83 00:04:39,180 --> 00:04:43,410 ‫So all we need to do here is to specify that function. 84 00:04:43,410 --> 00:04:46,893 ‫So getCabins, and then that's it. 85 00:04:48,480 --> 00:04:51,030 ‫Now this, of course, will return something. 86 00:04:51,030 --> 00:04:53,490 ‫And so let's start by checking out 87 00:04:53,490 --> 00:04:56,073 ‫what that is in our console. 88 00:04:57,720 --> 00:05:01,050 ‫And, so we see we already got something. 89 00:05:01,050 --> 00:05:05,880 ‫So this object here is the result of that console.log. 90 00:05:05,880 --> 00:05:09,243 ‫And so we see that we have the actual data. 91 00:05:11,010 --> 00:05:13,533 ‫Nice. So that is working. 92 00:05:14,520 --> 00:05:18,000 ‫So we have the data, we have an error string, 93 00:05:18,000 --> 00:05:20,520 ‫then we have all other kinds of things. 94 00:05:20,520 --> 00:05:24,450 ‫And we also automatically get that isLoading state 95 00:05:24,450 --> 00:05:26,430 ‫that I mentioned earlier. 96 00:05:26,430 --> 00:05:28,440 ‫And actually in addition to that, 97 00:05:28,440 --> 00:05:31,350 ‫we get a bunch of other states, 98 00:05:31,350 --> 00:05:32,820 ‫so similar to that. 99 00:05:32,820 --> 00:05:35,383 ‫So like isSuccess, or isPaused, 100 00:05:35,383 --> 00:05:37,920 ‫or isFetching, or isError, 101 00:05:37,920 --> 00:05:40,200 ‫or all of these other ones. 102 00:05:40,200 --> 00:05:44,070 ‫Now instead of using these, we could also use the status. 103 00:05:44,070 --> 00:05:47,250 ‫So for example, this one is right now at success, 104 00:05:47,250 --> 00:05:51,033 ‫but in the beginning it will be at loading, probably. 105 00:05:52,500 --> 00:05:54,453 ‫So maybe here we can see that. 106 00:05:55,890 --> 00:05:58,473 ‫Well, actually not. This is from earlier. 107 00:05:59,730 --> 00:06:01,830 ‫So maybe this one here is the initial one. 108 00:06:03,240 --> 00:06:04,830 ‫Yeah, it seems like it is. 109 00:06:04,830 --> 00:06:06,030 ‫And so here the status, 110 00:06:06,030 --> 00:06:09,450 ‫as I was saying, was initially loading. 111 00:06:09,450 --> 00:06:13,380 ‫So we can use this one or we can just use isLoading, 112 00:06:13,380 --> 00:06:16,233 ‫which, again, was true at the beginning. 113 00:06:17,490 --> 00:06:19,350 ‫So let's then destructure 114 00:06:19,350 --> 00:06:22,020 ‫these three important pieces of data. 115 00:06:22,020 --> 00:06:27,020 ‫So isLoading, then the data that I usually like to rename. 116 00:06:27,840 --> 00:06:29,520 ‫So this case to cabins, 117 00:06:29,520 --> 00:06:32,433 ‫and then also the error. 118 00:06:34,110 --> 00:06:37,380 ‫Now here, console.log no longer exists, 119 00:06:37,380 --> 00:06:39,390 ‫so x no longer exists. 120 00:06:39,390 --> 00:06:42,780 ‫And so let's immediately start using the things 121 00:06:42,780 --> 00:06:45,090 ‫that we get there from React Query. 122 00:06:45,090 --> 00:06:48,723 ‫So we can say that if loading, then return, 123 00:06:49,560 --> 00:06:51,693 ‫and now we have something like a spinner. 124 00:06:53,070 --> 00:06:57,240 ‫Yeah. So then we want to immediately return this. 125 00:06:57,240 --> 00:07:00,390 ‫And this style component is actually pretty interesting 126 00:07:00,390 --> 00:07:03,510 ‫because of this animation right here 127 00:07:03,510 --> 00:07:05,580 ‫with the keyframes function. 128 00:07:05,580 --> 00:07:07,260 ‫So you can check that out, 129 00:07:07,260 --> 00:07:09,903 ‫or you can also just use it here. 130 00:07:13,320 --> 00:07:14,913 ‫So let's then include that. 131 00:07:16,890 --> 00:07:19,600 ‫Import the spinner 132 00:07:20,490 --> 00:07:25,380 ‫from App again and then ui, 133 00:07:25,380 --> 00:07:26,943 ‫and then Spinner. 134 00:07:28,620 --> 00:07:32,910 ‫Alright, and so let's actually test that. 135 00:07:32,910 --> 00:07:34,440 ‫And nice. 136 00:07:34,440 --> 00:07:37,320 ‫So shortly we saw our spinner, 137 00:07:37,320 --> 00:07:39,750 ‫and then here we displayed this table. 138 00:07:39,750 --> 00:07:43,623 ‫And so now let's of course display our actual data here. 139 00:07:45,210 --> 00:07:48,810 ‫So for that we already have our Table component, 140 00:07:48,810 --> 00:07:51,090 ‫and then the TableHeader. 141 00:07:51,090 --> 00:07:54,900 ‫So I wrote a bunch of CSS for these already, 142 00:07:54,900 --> 00:07:58,080 ‫but what I want to show you the most 143 00:07:58,080 --> 00:08:01,260 ‫is that the TableHeader here will be a grid 144 00:08:01,260 --> 00:08:02,883 ‫with these six columns. 145 00:08:04,050 --> 00:08:06,543 ‫So let's use all of this. 146 00:08:10,110 --> 00:08:12,630 ‫So here, the Table component, 147 00:08:12,630 --> 00:08:15,483 ‫which will have a TableHeader, 148 00:08:16,530 --> 00:08:20,340 ‫and then besides that there will be one cabin row 149 00:08:20,340 --> 00:08:23,600 ‫for each of the cabins in our data array. 150 00:08:25,963 --> 00:08:28,683 ‫So here we will just have a bunch of divs. 151 00:08:30,570 --> 00:08:32,790 ‫So the first one will be for the image. 152 00:08:32,790 --> 00:08:35,850 ‫So let's leave that empty. 153 00:08:35,850 --> 00:08:37,710 ‫So no description there. 154 00:08:37,710 --> 00:08:39,213 ‫Then here the Cabin, 155 00:08:40,470 --> 00:08:41,733 ‫then the Capacity, 156 00:08:43,860 --> 00:08:45,033 ‫then the Price, 157 00:08:47,790 --> 00:08:49,230 ‫then the Discount. 158 00:08:49,230 --> 00:08:51,783 ‫And finally, let's leave another empty one here. 159 00:08:53,520 --> 00:08:58,170 ‫Alright, so here we are already seeing something. 160 00:08:58,170 --> 00:09:00,540 ‫Let's just give this element here 161 00:09:00,540 --> 00:09:03,480 ‫the role of a row, 162 00:09:03,480 --> 00:09:06,900 ‫and this one the role of a table. 163 00:09:06,900 --> 00:09:10,320 ‫So this is just to make the HTML a bit more accessible, 164 00:09:10,320 --> 00:09:13,590 ‫because this will actually function as a table, 165 00:09:13,590 --> 00:09:18,060 ‫but we do implement it not using the table HTML element, 166 00:09:18,060 --> 00:09:21,600 ‫but instead using divs and this header here. 167 00:09:21,600 --> 00:09:23,250 ‫But by specifying the role, 168 00:09:23,250 --> 00:09:26,040 ‫we then make sure that the browser knows 169 00:09:26,040 --> 00:09:30,150 ‫that this actually should be a table and a row. 170 00:09:30,150 --> 00:09:32,940 ‫But anyway, let's now then loop 171 00:09:32,940 --> 00:09:36,123 ‫over the cabins array, as always. 172 00:09:38,640 --> 00:09:43,260 ‫And then for each of them, let's include one cabin row. 173 00:09:43,260 --> 00:09:46,680 ‫So let's first come here, because again, 174 00:09:46,680 --> 00:09:50,070 ‫here we already only have some style components. 175 00:09:50,070 --> 00:09:53,133 ‫And so let's first create that component. 176 00:09:56,010 --> 00:09:58,350 ‫So creating it and exporting it 177 00:09:58,350 --> 00:10:00,213 ‫so that here we can then import it. 178 00:10:02,100 --> 00:10:06,060 ‫So one cabin row, and then as a prop, 179 00:10:06,060 --> 00:10:10,200 ‫we will accept the cabin that we want to render. 180 00:10:10,200 --> 00:10:14,823 ‫And as a key, as always, cabin.id. 181 00:10:19,500 --> 00:10:22,200 ‫All right, and so here we get one row 182 00:10:22,200 --> 00:10:27,153 ‫because we only have one cabin in our table on Supabase. 183 00:10:29,130 --> 00:10:33,630 ‫So let's accept our cabin prop here. 184 00:10:33,630 --> 00:10:36,030 ‫And then let's see what we have. 185 00:10:36,030 --> 00:10:37,680 ‫So we have a table row, 186 00:10:37,680 --> 00:10:39,870 ‫and then we have basically one element 187 00:10:39,870 --> 00:10:42,723 ‫for each of the things that we want to render. 188 00:10:47,700 --> 00:10:49,416 ‫So TableRow. 189 00:10:49,416 --> 00:10:53,460 ‫And again, let's specify the row as a row here. 190 00:10:53,460 --> 00:10:57,930 ‫And then, let's simply use everything that we have. 191 00:10:57,930 --> 00:11:01,680 ‫So the image with a source of, 192 00:11:01,680 --> 00:11:04,200 ‫well, now I don't really remember the data. 193 00:11:04,200 --> 00:11:08,460 ‫But luckily for us, we can go check out our dev tools. 194 00:11:08,460 --> 00:11:10,260 ‫So that we haven't done yet. 195 00:11:10,260 --> 00:11:13,110 ‫And so here, as we installed in the previous lecture, 196 00:11:13,110 --> 00:11:15,540 ‫we have the React Query dev tools. 197 00:11:15,540 --> 00:11:18,330 ‫And so now here we have that cabin data. 198 00:11:18,330 --> 00:11:21,600 ‫And notice how this is exactly the query key 199 00:11:21,600 --> 00:11:23,910 ‫that we specified earlier. 200 00:11:23,910 --> 00:11:25,590 ‫So we can click there. 201 00:11:25,590 --> 00:11:29,433 ‫And then down here we actually have our data. 202 00:11:30,270 --> 00:11:31,650 ‫So this is an array. 203 00:11:31,650 --> 00:11:34,983 ‫And so here we then see all the data that we have. 204 00:11:35,910 --> 00:11:38,220 ‫So this is really, really useful 205 00:11:38,220 --> 00:11:40,893 ‫when we are developing with React Query. 206 00:11:43,470 --> 00:11:47,343 ‫So let's do this again. 207 00:11:50,520 --> 00:11:55,080 ‫So now we know that it's called cabin.image. 208 00:11:55,080 --> 00:11:58,053 ‫And actually, why not destructure this whole thing? 209 00:11:59,520 --> 00:12:04,063 ‫So actually let's use the name, the maxCapacity, 210 00:12:07,792 --> 00:12:09,303 ‫the regularPrice, 211 00:12:13,260 --> 00:12:16,323 ‫discount, and image. 212 00:12:17,460 --> 00:12:19,830 ‫So all that we take from the cabin prop. 213 00:12:19,830 --> 00:12:24,213 ‫And so here, all we need to specify is the image. 214 00:12:27,270 --> 00:12:31,980 ‫All right, and nice. There it is. 215 00:12:31,980 --> 00:12:34,660 ‫It's really small, but I think that will change 216 00:12:35,730 --> 00:12:37,380 ‫if the page is a bit bigger, 217 00:12:37,380 --> 00:12:39,663 ‫or once we add more elements here. 218 00:12:41,430 --> 00:12:43,620 ‫So next we have the Cabin component, 219 00:12:43,620 --> 00:12:45,843 ‫which will just contain the name. 220 00:12:48,840 --> 00:12:52,323 ‫And here we actually have this other font family. 221 00:12:55,260 --> 00:12:58,200 ‫Next up, here we just need a div 222 00:12:58,200 --> 00:13:03,093 ‫because this doesn't have any special styling. 223 00:13:09,390 --> 00:13:11,970 ‫And let's keep going. 224 00:13:11,970 --> 00:13:13,870 ‫Here we have an element for the Price. 225 00:13:17,850 --> 00:13:20,193 ‫So let's use our formatCurrency, 226 00:13:22,830 --> 00:13:25,170 ‫which is not importing automatically, 227 00:13:25,170 --> 00:13:26,670 ‫but we'll do that in a minute. 228 00:13:30,808 --> 00:13:33,420 ‫And then let's do something similar 229 00:13:33,420 --> 00:13:35,640 ‫with the Discount element. 230 00:13:35,640 --> 00:13:39,393 ‫And then here we format the discount. 231 00:13:40,621 --> 00:13:44,537 ‫And then finally here, we want a button to delete. 232 00:13:46,290 --> 00:13:48,240 ‫Later, we will use an icon here, 233 00:13:48,240 --> 00:13:50,670 ‫but for now, let's do it like this, 234 00:13:50,670 --> 00:13:54,753 ‫and let's import the formatCurrency function. 235 00:14:05,550 --> 00:14:08,733 ‫And, ah yeah, right. 236 00:14:09,570 --> 00:14:11,943 ‫So let's come here to this file, 237 00:14:12,870 --> 00:14:14,970 ‫so to our utilities. 238 00:14:14,970 --> 00:14:18,060 ‫And here, these helper functions, one of them, 239 00:14:18,060 --> 00:14:20,220 ‫or actually I think some of them 240 00:14:20,220 --> 00:14:24,000 ‫use this date functions library that I mentioned 241 00:14:24,000 --> 00:14:27,360 ‫in the beginning when we first planned our project. 242 00:14:27,360 --> 00:14:31,140 ‫So this is a very popular library for manipulating 243 00:14:31,140 --> 00:14:34,590 ‫and for doing calculations with dates. 244 00:14:34,590 --> 00:14:36,813 ‫So let's quickly go ahead and install that. 245 00:14:38,700 --> 00:14:43,700 ‫So date, fns for functions. 246 00:14:44,610 --> 00:14:48,150 ‫And if we later need this ourselves, 247 00:14:48,150 --> 00:14:52,440 ‫then we can also open up the documentation here as always. 248 00:14:52,440 --> 00:14:55,860 ‫So this really contains a ton of helper functions, 249 00:14:55,860 --> 00:15:00,210 ‫this library, and it's really a great way 250 00:15:00,210 --> 00:15:02,520 ‫of abstracting away the difficulties 251 00:15:02,520 --> 00:15:05,400 ‫of working with JavaScript dates. 252 00:15:05,400 --> 00:15:07,500 ‫Now, here we still have some problem, 253 00:15:07,500 --> 00:15:12,090 ‫even though we correctly installed it. 254 00:15:12,090 --> 00:15:15,240 ‫Or actually we didn't, or at least I didn't. 255 00:15:15,240 --> 00:15:19,890 ‫So it should be called date fns and not data. 256 00:15:19,890 --> 00:15:21,633 ‫So I will actually uninstall this, 257 00:15:23,790 --> 00:15:26,850 ‫which we can do using this command here. 258 00:15:26,850 --> 00:15:30,037 ‫And then, so date fns. 259 00:15:38,490 --> 00:15:42,300 ‫Let's try that again, and nice. 260 00:15:42,300 --> 00:15:44,340 ‫And if this was a bit larger, 261 00:15:44,340 --> 00:15:48,513 ‫then the whole thing would also look a lot better. 262 00:15:49,650 --> 00:15:50,643 ‫Great. 263 00:15:51,840 --> 00:15:56,510 ‫Let's just give ourselves another cabin here. 264 00:15:59,130 --> 00:16:03,093 ‫So let's call this one 002, for four people, 265 00:16:03,990 --> 00:16:07,833 ‫400 euros, let's say, 75 discount. 266 00:16:12,990 --> 00:16:16,290 ‫Let's save it. We don't need any image here. 267 00:16:16,290 --> 00:16:18,000 ‫And then if we reload, 268 00:16:18,000 --> 00:16:20,703 ‫then indeed we get our second one. 269 00:16:21,638 --> 00:16:23,310 ‫Now, okay. 270 00:16:23,310 --> 00:16:24,930 ‫Now, up until this point, 271 00:16:24,930 --> 00:16:28,110 ‫all of this is really nothing not so new. 272 00:16:28,110 --> 00:16:32,130 ‫So everything works here in the exact same way as before, 273 00:16:32,130 --> 00:16:34,380 ‫even though we simplified our code a bit. 274 00:16:34,380 --> 00:16:38,190 ‫But yeah, here it seems that everything is the same. 275 00:16:38,190 --> 00:16:42,270 ‫However, watch what happens if I go now to another page, 276 00:16:42,270 --> 00:16:45,090 ‫so if I move away from this component 277 00:16:45,090 --> 00:16:47,820 ‫which has therefore unmounted. 278 00:16:47,820 --> 00:16:51,330 ‫So now we can see that our state here 279 00:16:51,330 --> 00:16:54,120 ‫so that this cabin data is inactive. 280 00:16:54,120 --> 00:16:56,733 ‫But watch what happens if I go back here. 281 00:16:58,800 --> 00:17:01,530 ‫So here is the same data again, 282 00:17:01,530 --> 00:17:05,100 ‫and we didn't have to do any new fetch request. 283 00:17:05,100 --> 00:17:07,620 ‫So there wasn't a loading spinner this time, 284 00:17:07,620 --> 00:17:10,413 ‫because we already had the data from before. 285 00:17:11,400 --> 00:17:14,910 ‫Now of course, if we loaded the page here first, 286 00:17:14,910 --> 00:17:17,160 ‫then we don't have the cabin's data yet. 287 00:17:17,160 --> 00:17:20,070 ‫And as we move here, it first needs to be fetched. 288 00:17:20,070 --> 00:17:22,230 ‫And so then we get that loading spinner, 289 00:17:22,230 --> 00:17:25,710 ‫and the data gets stored in our cache. 290 00:17:25,710 --> 00:17:29,040 ‫Then again, as we move away the component amounts 291 00:17:29,040 --> 00:17:31,293 ‫but the data stays in our cache. 292 00:17:32,160 --> 00:17:34,200 ‫So traditionally, if we were doing it 293 00:17:34,200 --> 00:17:35,970 ‫using a use effect hook, 294 00:17:35,970 --> 00:17:38,820 ‫then as soon as we moved back to the page, 295 00:17:38,820 --> 00:17:42,180 ‫the use effect hook would then fetch the data again. 296 00:17:42,180 --> 00:17:45,780 ‫But here again, the data is already there. 297 00:17:45,780 --> 00:17:47,523 ‫It's still in our cache. 298 00:17:49,230 --> 00:17:52,950 ‫Now after some time, notice how the color here changed 299 00:17:52,950 --> 00:17:56,160 ‫from green and fresh to stale. 300 00:17:56,160 --> 00:17:59,370 ‫So this stale basically means inside React Query 301 00:17:59,370 --> 00:18:03,990 ‫that the data is now old so that it's basically invalid. 302 00:18:03,990 --> 00:18:06,540 ‫And so therefore when we do certain things, 303 00:18:06,540 --> 00:18:09,870 ‫it will now automatically re-fetch the data. 304 00:18:09,870 --> 00:18:13,950 ‫So just as we learned in the first lecture of the section. 305 00:18:13,950 --> 00:18:16,200 ‫And one of the things that we can do, 306 00:18:16,200 --> 00:18:18,420 ‫which will then trigger a re-fetch, 307 00:18:18,420 --> 00:18:21,540 ‫is to move away from this browser tab 308 00:18:21,540 --> 00:18:23,700 ‫and then come back to it later. 309 00:18:23,700 --> 00:18:25,860 ‫So that will trigger a re-fetch 310 00:18:25,860 --> 00:18:28,023 ‫as soon as the data is stale. 311 00:18:29,130 --> 00:18:32,880 ‫So let's try to go to Supabase here. 312 00:18:32,880 --> 00:18:36,840 ‫So go to another tab, and then let's change something. 313 00:18:36,840 --> 00:18:40,050 ‫So let's change the price here to 500, 314 00:18:40,050 --> 00:18:43,680 ‫or maybe let's change the discount to something else. 315 00:18:43,680 --> 00:18:46,410 ‫And so that will then simulate that scenario 316 00:18:46,410 --> 00:18:50,160 ‫where some other user of the application changes something. 317 00:18:50,160 --> 00:18:52,500 ‫And so then all the applications running 318 00:18:52,500 --> 00:18:55,350 ‫on other browsers will come out of sync. 319 00:18:55,350 --> 00:18:57,570 ‫And so React Query prevents that 320 00:18:57,570 --> 00:19:00,333 ‫from automatically re fetching the data. 321 00:19:01,380 --> 00:19:04,170 ‫So let's change this here to 200. 322 00:19:04,170 --> 00:19:06,150 ‫And so as we come back here, 323 00:19:06,150 --> 00:19:08,823 ‫notice how it will automatically re-fetch. 324 00:19:10,260 --> 00:19:14,373 ‫So notice that it quickly changed here to 200. 325 00:19:15,900 --> 00:19:20,040 ‫All right, now at this point, the data is still fresh. 326 00:19:20,040 --> 00:19:23,760 ‫And so if we go here now and then come back, 327 00:19:23,760 --> 00:19:27,000 ‫it will not immediately re-fetch the page. 328 00:19:27,000 --> 00:19:28,530 ‫Now we can't really see that 329 00:19:28,530 --> 00:19:30,840 ‫because we didn't change anything, 330 00:19:30,840 --> 00:19:32,673 ‫but let's change it to 100. 331 00:19:34,350 --> 00:19:38,580 ‫So again, in this case, it didn't automatically re-fetch yet 332 00:19:38,580 --> 00:19:41,160 ‫because the data is still fresh. 333 00:19:41,160 --> 00:19:44,910 ‫And the time that it takes until the data becomes old, 334 00:19:44,910 --> 00:19:46,980 ‫so until it becomes stale, 335 00:19:46,980 --> 00:19:50,220 ‫is exactly that stale time that we defined 336 00:19:50,220 --> 00:19:51,513 ‫in the previous lecture. 337 00:19:52,770 --> 00:19:56,610 ‫So this value right here, this one minute that we set 338 00:19:56,610 --> 00:20:00,300 ‫is the time that it takes for this data, 339 00:20:00,300 --> 00:20:03,003 ‫as I just said, to become stale. 340 00:20:03,900 --> 00:20:07,320 ‫So now that happened, that one minute has passed. 341 00:20:07,320 --> 00:20:10,290 ‫And so as soon as I leave, for example, 342 00:20:10,290 --> 00:20:13,800 ‫I can go to another browser tab or also just here. 343 00:20:13,800 --> 00:20:16,230 ‫And then as I come back here, 344 00:20:16,230 --> 00:20:21,180 ‫it will move from stale to fetching and then to fresh. 345 00:20:21,180 --> 00:20:25,143 ‫So now we are back to that $100 there. 346 00:20:26,850 --> 00:20:30,900 ‫So again, it is defined by this time right here 347 00:20:30,900 --> 00:20:35,010 ‫how long it takes for the data to become stale. 348 00:20:35,010 --> 00:20:39,120 ‫So here we can define that, and actually let's change it. 349 00:20:39,120 --> 00:20:42,330 ‫So let's leave that there just as a reference 350 00:20:42,330 --> 00:20:44,220 ‫and let's set a to 0. 351 00:20:44,220 --> 00:20:47,220 ‫And so what this means is that now the data 352 00:20:47,220 --> 00:20:49,863 ‫will always automatically become stale. 353 00:20:51,240 --> 00:20:54,060 ‫So now the data is always invalid. 354 00:20:54,060 --> 00:20:58,530 ‫So as soon as something here changes and we come back, 355 00:20:58,530 --> 00:21:01,320 ‫it will immediately then re-fetch that. 356 00:21:01,320 --> 00:21:04,440 ‫And so let's actually leave this value of 0 357 00:21:04,440 --> 00:21:05,883 ‫as the stale time. 358 00:21:07,110 --> 00:21:10,920 ‫Great. So this is really, really amazing. 359 00:21:10,920 --> 00:21:13,830 ‫All the functionality that we so easily 360 00:21:13,830 --> 00:21:16,590 ‫get out of the box with React Query. 361 00:21:16,590 --> 00:21:18,810 ‫And we will keep exploring all of this here 362 00:21:18,810 --> 00:21:20,220 ‫throughout this section 363 00:21:20,220 --> 00:21:22,380 ‫and throughout the rest of the project. 364 00:21:22,380 --> 00:21:24,570 ‫But with this, you already got a taste 365 00:21:24,570 --> 00:21:28,560 ‫of how powerful this library really is. 366 00:21:28,560 --> 00:21:32,340 ‫And in the next lecture, we will make it even more powerful 367 00:21:32,340 --> 00:21:34,440 ‫by doing mutations, 368 00:21:34,440 --> 00:21:38,253 ‫so by basically changing the data that is on the server.