1 00:00:01,350 --> 00:00:03,060 ‫Welcome back. 2 00:00:03,060 --> 00:00:06,510 ‫So, in the final two lectures of the section, 3 00:00:06,510 --> 00:00:09,540 ‫let's go back to some more advanced features 4 00:00:09,540 --> 00:00:11,370 ‫of React Router, 5 00:00:11,370 --> 00:00:12,870 ‫and, in particular, 6 00:00:12,870 --> 00:00:17,100 ‫let's learn about how we can fetch and mutate data 7 00:00:17,100 --> 00:00:19,710 ‫without actually causing navigations, 8 00:00:19,710 --> 00:00:22,533 ‫so without moving to another page. 9 00:00:24,060 --> 00:00:28,650 ‫And, so let's now leave behind or create order form 10 00:00:28,650 --> 00:00:32,010 ‫and we also no longer need this user slice. 11 00:00:32,010 --> 00:00:34,980 ‫And, instead, now we will be back 12 00:00:34,980 --> 00:00:37,590 ‫to working on this order page. 13 00:00:37,590 --> 00:00:40,653 ‫So, the page that is already opened right here. 14 00:00:41,700 --> 00:00:43,830 ‫So, as I said in the beginning, 15 00:00:43,830 --> 00:00:48,000 ‫sometimes we need to fetch some data from another route, 16 00:00:48,000 --> 00:00:50,970 ‫so basically data that is not associated 17 00:00:50,970 --> 00:00:53,550 ‫with this current page right here, 18 00:00:53,550 --> 00:00:55,140 ‫but we want to do that 19 00:00:55,140 --> 00:00:58,380 ‫without causing a navigation sometimes. 20 00:00:58,380 --> 00:01:02,910 ‫So, for example, let's say that here in the order page, 21 00:01:02,910 --> 00:01:06,000 ‫we wanted to load the menu data again, 22 00:01:06,000 --> 00:01:08,190 ‫and we already wrote all the logic 23 00:01:08,190 --> 00:01:11,010 ‫for fetching exactly that data, 24 00:01:11,010 --> 00:01:13,860 ‫but it is associated to another route. 25 00:01:13,860 --> 00:01:17,160 ‫So, to the menu route and not to this one, 26 00:01:17,160 --> 00:01:19,350 ‫but still we want to use it here, 27 00:01:19,350 --> 00:01:23,880 ‫because there is no point in writing that logic again. 28 00:01:23,880 --> 00:01:26,490 ‫So, in other words, what we want to do 29 00:01:26,490 --> 00:01:29,670 ‫is to use the data from the menu route, 30 00:01:29,670 --> 00:01:32,730 ‫but without the user actually going there. 31 00:01:32,730 --> 00:01:36,393 ‫And, so, for that, we can use the useFetcher hook. 32 00:01:39,750 --> 00:01:43,953 ‫So, this hook will return something called a fetcher. 33 00:01:45,930 --> 00:01:48,990 ‫And, so let's use use fetcher, 34 00:01:48,990 --> 00:01:52,800 ‫and as always also included here, 35 00:01:52,800 --> 00:01:54,400 ‫let's move that at the very top, 36 00:01:55,410 --> 00:01:59,220 ‫and then let's immediately use this fetcher. 37 00:01:59,220 --> 00:02:02,310 ‫So, the idea here is to load the menu data, 38 00:02:02,310 --> 00:02:05,490 ‫so that we can then associate the ingredients 39 00:02:05,490 --> 00:02:07,503 ‫to each of the different pizzas. 40 00:02:08,370 --> 00:02:12,270 ‫So, let's actually load another order here. 41 00:02:12,270 --> 00:02:15,030 ‫So, again, this test order that we have here. 42 00:02:15,030 --> 00:02:17,640 ‫And, so what we want to do is to extend 43 00:02:17,640 --> 00:02:21,030 ‫each of these items here with their ingredients 44 00:02:21,030 --> 00:02:24,393 ‫and so we can get that data from the menu route. 45 00:02:26,130 --> 00:02:27,900 ‫So, what we want to do is, 46 00:02:27,900 --> 00:02:30,330 ‫right after this component mounts, 47 00:02:30,330 --> 00:02:34,443 ‫we want to fetch that menu data using our fetcher. 48 00:02:35,850 --> 00:02:39,690 ‫So, if we want to do this at component mount, 49 00:02:39,690 --> 00:02:42,813 ‫then let's again use our friend use effect. 50 00:02:44,370 --> 00:02:47,640 ‫So, we haven't touched this one in a long time, 51 00:02:47,640 --> 00:02:49,050 ‫but now here we need it, 52 00:02:49,050 --> 00:02:51,030 ‫because we want to fetch this data, 53 00:02:51,030 --> 00:02:52,860 ‫not on some event, 54 00:02:52,860 --> 00:02:55,413 ‫but really when the page first loads. 55 00:02:58,530 --> 00:03:02,130 ‫Alright, and so the way we use this fetcher 56 00:03:02,130 --> 00:03:06,240 ‫is simply by calling fetcher.load, 57 00:03:06,240 --> 00:03:08,433 ‫and then the name of the route, 58 00:03:09,300 --> 00:03:11,790 ‫and this is actually it. 59 00:03:11,790 --> 00:03:13,590 ‫So, this will then load the data, 60 00:03:13,590 --> 00:03:17,070 ‫and will store it basically in this fetcher object, 61 00:03:17,070 --> 00:03:19,890 ‫and then later we can retrieve the data from there 62 00:03:19,890 --> 00:03:21,450 ‫when we want. 63 00:03:21,450 --> 00:03:24,270 ‫And, actually, let's only fetch this data 64 00:03:24,270 --> 00:03:26,820 ‫if there is no data yet. 65 00:03:26,820 --> 00:03:31,170 ‫So, we can do if there is no fetcher.data. 66 00:03:34,110 --> 00:03:38,730 ‫Alright, and just like normal page navigations, 67 00:03:38,730 --> 00:03:42,270 ‫this fetcher can also be in different states. 68 00:03:42,270 --> 00:03:47,070 ‫So, just like here in our app layout, 69 00:03:47,070 --> 00:03:49,860 ‫remember that we can have, in the navigation, 70 00:03:49,860 --> 00:03:53,580 ‫the state of idle loading or submitting. 71 00:03:53,580 --> 00:03:56,910 ‫And, so here, with the fetcher, it's the same thing. 72 00:03:56,910 --> 00:04:00,870 ‫And, so by default, the state is idle. 73 00:04:00,870 --> 00:04:03,990 ‫And, so let's only start fetching this data 74 00:04:03,990 --> 00:04:06,693 ‫whenever the fetcher is in the idle state, 75 00:04:07,680 --> 00:04:12,680 ‫so when it's not already doing something equal to idle. 76 00:04:14,580 --> 00:04:18,840 ‫Alright, and here we need to include that fetcher 77 00:04:18,840 --> 00:04:20,820 ‫in the dependency array, 78 00:04:20,820 --> 00:04:22,860 ‫and beautiful. 79 00:04:22,860 --> 00:04:26,430 ‫So, with this, our data should already be fetching, 80 00:04:26,430 --> 00:04:29,583 ‫which we can probably see in the network tab here. 81 00:04:31,500 --> 00:04:34,617 ‫So, let's just reload the page here 82 00:04:34,617 --> 00:04:37,293 ‫and then filter for fetch requests. 83 00:04:39,150 --> 00:04:40,623 ‫We need even more space. 84 00:04:41,550 --> 00:04:43,563 ‫But, here, we only have that one, 85 00:04:45,540 --> 00:04:48,210 ‫but, well, nevermind. 86 00:04:48,210 --> 00:04:50,250 ‫I believe it should still have worked. 87 00:04:50,250 --> 00:04:53,193 ‫Maybe, it is somewhere else here, 88 00:04:54,510 --> 00:04:56,250 ‫but, yeah, let's see later. 89 00:04:56,250 --> 00:04:59,310 ‫Let's first try to actually access this data 90 00:04:59,310 --> 00:05:01,353 ‫and then see what happens. 91 00:05:02,340 --> 00:05:06,753 ‫And, indeed, why not immediately log it here to the console? 92 00:05:08,112 --> 00:05:10,860 ‫So, let's say fetcher.data, 93 00:05:10,860 --> 00:05:13,110 ‫and then here in the console, 94 00:05:13,110 --> 00:05:15,693 ‫well, we don't get anything, 95 00:05:16,950 --> 00:05:18,093 ‫try that again, 96 00:05:19,320 --> 00:05:20,730 ‫and still nothing. 97 00:05:20,730 --> 00:05:24,880 ‫So, maybe we should remove this condition here just to test 98 00:05:25,860 --> 00:05:28,263 ‫or actually the problem is right here. 99 00:05:29,139 --> 00:05:32,493 ‫So, this is fetcher.state. 100 00:05:33,630 --> 00:05:34,893 ‫So, just like this. 101 00:05:35,880 --> 00:05:39,633 ‫And, yeah, so now there is our menu data. 102 00:05:40,920 --> 00:05:43,320 ‫So, that was a silly bug. 103 00:05:43,320 --> 00:05:46,623 ‫Maybe, you have even caught this before me. 104 00:05:47,610 --> 00:05:49,680 ‫But, anyway, what we want to do now 105 00:05:49,680 --> 00:05:53,823 ‫is to pass this data into each of these order items. 106 00:05:55,560 --> 00:05:59,910 ‫Alright, so where actually is that? 107 00:05:59,910 --> 00:06:01,830 ‫Ah, right here. 108 00:06:01,830 --> 00:06:04,380 ‫So, we want to pass in basically now 109 00:06:04,380 --> 00:06:06,990 ‫only the array of ingredients. 110 00:06:06,990 --> 00:06:08,373 ‫So, let's check that. 111 00:06:09,750 --> 00:06:12,720 ‫So, each of them has this array of ingredients. 112 00:06:12,720 --> 00:06:15,480 ‫And, so that's what we want to pass in now 113 00:06:15,480 --> 00:06:17,223 ‫as the ingredients prop. 114 00:06:20,400 --> 00:06:22,890 ‫So, each of these items doesn't need to know 115 00:06:22,890 --> 00:06:24,840 ‫about the entire menu, 116 00:06:24,840 --> 00:06:29,133 ‫only the ingredients that are relevant for the item itself. 117 00:06:30,450 --> 00:06:35,040 ‫So, we access the entire data at fetcher.data. 118 00:06:36,330 --> 00:06:38,220 ‫And, then if that exists, 119 00:06:38,220 --> 00:06:41,490 ‫so, again, very helpful, optional training. 120 00:06:41,490 --> 00:06:43,740 ‫And, then let's find the menu item 121 00:06:43,740 --> 00:06:47,640 ‫that corresponds to this order item. 122 00:06:47,640 --> 00:06:49,080 ‫So, that should be easy, 123 00:06:49,080 --> 00:06:51,333 ‫because they share the same ID. 124 00:06:54,030 --> 00:06:58,710 ‫So, let's just say item.ID. 125 00:06:58,710 --> 00:07:01,590 ‫So, here they actually are called ID, 126 00:07:01,590 --> 00:07:05,070 ‫but, in the order, they are called pizza ID. 127 00:07:05,070 --> 00:07:07,683 ‫So, they need to be equal to the pizza ID. 128 00:07:08,640 --> 00:07:10,680 ‫Now, here, I cannot call this item, 129 00:07:10,680 --> 00:07:14,940 ‫but let's just say element, 130 00:07:14,940 --> 00:07:19,940 ‫because we are already calling each item in the card item. 131 00:07:20,460 --> 00:07:22,710 ‫So, the element ID from the menu 132 00:07:22,710 --> 00:07:26,770 ‫needs to be exactly the same as item.pizzaId. 133 00:07:30,690 --> 00:07:34,470 ‫Okay, so this then returns the entire object 134 00:07:34,470 --> 00:07:37,050 ‫that corresponds to the pizza. 135 00:07:37,050 --> 00:07:38,070 ‫And, then, from there, 136 00:07:38,070 --> 00:07:41,433 ‫let's just grab the ingredients array. 137 00:07:44,400 --> 00:07:49,140 ‫Okay, and then here in that component, 138 00:07:49,140 --> 00:07:51,180 ‫let's accept that, 139 00:07:51,180 --> 00:07:54,180 ‫and then actually we already have that prop here, 140 00:07:54,180 --> 00:07:57,570 ‫along with the is loading ingredients prop. 141 00:07:57,570 --> 00:08:01,563 ‫So, why not also define that here immediately? 142 00:08:03,420 --> 00:08:04,860 ‫So, this is loading, 143 00:08:04,860 --> 00:08:09,860 ‫is basically fetcher.state whenever it is equal to loading. 144 00:08:13,080 --> 00:08:18,080 ‫So, just like before, similar to this navigation.state 145 00:08:18,180 --> 00:08:20,523 ‫that can also be equal to loading. 146 00:08:22,740 --> 00:08:24,120 ‫Alright, and so here, 147 00:08:24,120 --> 00:08:26,550 ‫let's now then use these two 148 00:08:26,550 --> 00:08:31,530 ‫by adding a new paragraph here below this div. 149 00:08:31,530 --> 00:08:35,040 ‫And, let's style this, of course, a little bit 150 00:08:35,040 --> 00:08:40,040 ‫making the text small, capitalizing the letters, 151 00:08:41,760 --> 00:08:43,530 ‫making it italic, 152 00:08:43,530 --> 00:08:46,230 ‫and a bit lighter. 153 00:08:46,230 --> 00:08:48,453 ‫So, text-stone-500. 154 00:08:49,770 --> 00:08:53,703 ‫And, then here whenever we are loading the ingredients, 155 00:08:55,020 --> 00:08:58,413 ‫then let's just return here, 156 00:09:00,330 --> 00:09:03,480 ‫loading and otherwise, 157 00:09:03,480 --> 00:09:08,480 ‫let's return ingredients.join like this, 158 00:09:11,130 --> 00:09:12,840 ‫and let's give it a save, 159 00:09:12,840 --> 00:09:14,280 ‫and beautiful. 160 00:09:14,280 --> 00:09:16,890 ‫There is the data. 161 00:09:16,890 --> 00:09:18,600 ‫So, let's try that again. 162 00:09:18,600 --> 00:09:21,153 ‫We'll just copy it, then move here, 163 00:09:24,420 --> 00:09:27,840 ‫and, well, I'm glad we tested that, 164 00:09:27,840 --> 00:09:30,783 ‫because here we have some kind of bug. 165 00:09:32,070 --> 00:09:34,590 ‫So, probably, we are trying to read the data here 166 00:09:34,590 --> 00:09:37,530 ‫from fetcher before it even exists. 167 00:09:37,530 --> 00:09:41,880 ‫And, so let's just use optional chaining here on all of this 168 00:09:41,880 --> 00:09:43,983 ‫and then one of them should fix it. 169 00:09:46,740 --> 00:09:50,220 ‫So, let's just go back here, reload. 170 00:09:50,220 --> 00:09:51,273 ‫Try that again. 171 00:09:52,290 --> 00:09:56,133 ‫But, apparently, we have still some other error. 172 00:09:57,510 --> 00:09:59,490 ‫And, yeah, just here from this message, 173 00:09:59,490 --> 00:10:00,393 ‫we can see, 174 00:10:01,260 --> 00:10:04,080 ‫since we have the problem with the join 175 00:10:04,080 --> 00:10:09,080 ‫that the problem is apparently right here. 176 00:10:09,090 --> 00:10:13,500 ‫So, maybe this is loading ingredients is not doing its job. 177 00:10:13,500 --> 00:10:17,913 ‫Let's try to lock that here to the console. 178 00:10:20,190 --> 00:10:21,543 ‫Let's just reload here. 179 00:10:23,580 --> 00:10:28,580 ‫And, so then let's see if we get that lock. 180 00:10:29,070 --> 00:10:32,280 ‫And, so it is actually always false, 181 00:10:32,280 --> 00:10:34,923 ‫so let's see why that is. 182 00:10:36,210 --> 00:10:39,540 ‫But, apparently, here everything is correct, 183 00:10:39,540 --> 00:10:42,330 ‫so there should be no problem with this. 184 00:10:42,330 --> 00:10:45,960 ‫So, I'm guessing that the issue is that, 185 00:10:45,960 --> 00:10:47,220 ‫in the very beginning, 186 00:10:47,220 --> 00:10:49,770 ‫fetcher.state will be idle, 187 00:10:49,770 --> 00:10:53,670 ‫but that doesn't mean that we already have our ingredients, 188 00:10:53,670 --> 00:10:55,770 ‫so that we have our data already. 189 00:10:55,770 --> 00:10:59,160 ‫And, so in those very first instance, 190 00:10:59,160 --> 00:11:01,587 ‫here, we will not be loading the data, 191 00:11:01,587 --> 00:11:05,040 ‫but we also don't have the data yet. 192 00:11:05,040 --> 00:11:09,630 ‫And, so let's just try to return an empty array 193 00:11:09,630 --> 00:11:11,580 ‫then in this case. 194 00:11:11,580 --> 00:11:14,340 ‫So, basically, if this year doesn't exist, 195 00:11:14,340 --> 00:11:16,800 ‫then we just return an empty array. 196 00:11:16,800 --> 00:11:19,020 ‫So, that will then fix the problem 197 00:11:19,020 --> 00:11:21,990 ‫that here we are trying to join undefined. 198 00:11:21,990 --> 00:11:26,610 ‫And, actually, we can already see that this worked. 199 00:11:26,610 --> 00:11:28,260 ‫So, let's see that one more time. 200 00:11:29,760 --> 00:11:31,770 ‫And, so then it says loading. 201 00:11:31,770 --> 00:11:36,770 ‫And, after some time, you will see that data arrive. 202 00:11:37,980 --> 00:11:42,933 ‫So, here, then let's just add a bit of space between, 203 00:11:44,633 --> 00:11:48,900 ‫so space-Y-1, and nice. 204 00:11:50,220 --> 00:11:54,390 ‫So, with this, we finished yet another very small feature, 205 00:11:54,390 --> 00:11:58,609 ‫which wasn't even part of the requirement list, 206 00:11:58,609 --> 00:12:00,000 ‫but I still wanted you to show 207 00:12:00,000 --> 00:12:03,060 ‫this way of basically fetching data 208 00:12:03,060 --> 00:12:05,130 ‫without going to the page 209 00:12:05,130 --> 00:12:08,640 ‫where the data is actually coming from. 210 00:12:08,640 --> 00:12:11,403 ‫So, here, we are fetching the data from the menu route. 211 00:12:14,012 --> 00:12:17,280 ‫And, so we are making use of this loader function right here 212 00:12:17,280 --> 00:12:18,480 ‫to get the menu, 213 00:12:18,480 --> 00:12:21,150 ‫but, again, without navigating there. 214 00:12:21,150 --> 00:12:23,700 ‫And, so if you are using React Router 215 00:12:23,700 --> 00:12:26,100 ‫and all these data loading features, 216 00:12:26,100 --> 00:12:29,760 ‫in order to build a very interactive application, 217 00:12:29,760 --> 00:12:33,990 ‫you'll use this useFetcher hook here quite often, 218 00:12:33,990 --> 00:12:36,690 ‫which is why I thought that it was important 219 00:12:36,690 --> 00:12:39,780 ‫to also include that more advanced part 220 00:12:39,780 --> 00:12:41,793 ‫here at the end of this section.