1 00:00:01,140 --> 00:00:04,560 ‫So let's now learn what Prefetching is 2 00:00:04,560 --> 00:00:07,710 ‫and how we can implement it using React Query 3 00:00:07,710 --> 00:00:11,733 ‫in order to make the pagination experience a lot better. 4 00:00:13,230 --> 00:00:17,040 ‫But what actually is prefetching? 5 00:00:17,040 --> 00:00:21,270 ‫Well, prefetching is all about fetching some data 6 00:00:21,270 --> 00:00:24,210 ‫that we know might become necessary 7 00:00:24,210 --> 00:00:27,720 ‫before we actually need that data to render it 8 00:00:27,720 --> 00:00:29,730 ‫on the user interface. 9 00:00:29,730 --> 00:00:33,690 ‫And in the context of pagination, usually that means 10 00:00:33,690 --> 00:00:38,690 ‫that we fetch the next page before it is actually displayed. 11 00:00:38,910 --> 00:00:40,230 ‫So in this case, 12 00:00:40,230 --> 00:00:44,070 ‫that would mean that here in page number seven, 13 00:00:44,070 --> 00:00:48,270 ‫we would already have page number eight here in the cache 14 00:00:48,270 --> 00:00:50,160 ‫and so then when we move there, 15 00:00:50,160 --> 00:00:54,270 ‫this data from page number eight could simply be get 16 00:00:54,270 --> 00:00:56,820 ‫from the cache and rendered. 17 00:00:56,820 --> 00:01:00,420 ‫While now, since we don't have that data yet, 18 00:01:00,420 --> 00:01:03,063 ‫it'll just load it on the fly. 19 00:01:04,290 --> 00:01:09,290 ‫Now, right and the same thing of course for going back. 20 00:01:09,480 --> 00:01:12,660 ‫So here we already have page number seven in the cache 21 00:01:12,660 --> 00:01:15,540 ‫but now if I go to page six, 22 00:01:15,540 --> 00:01:18,933 ‫it needed to load that again from the API. 23 00:01:20,940 --> 00:01:25,830 ‫All right and so let's make the user experience a bit better 24 00:01:25,830 --> 00:01:28,290 ‫by prefetching this data. 25 00:01:28,290 --> 00:01:30,693 ‫So right here in Use Booking. 26 00:01:31,680 --> 00:01:35,430 ‫So here we have the Query itself 27 00:01:35,430 --> 00:01:39,570 ‫and then before we return this stuff, let's have 28 00:01:39,570 --> 00:01:43,440 ‫or prefetching. 29 00:01:43,440 --> 00:01:47,490 ‫And the way this works is that we first need to QueryClient 30 00:01:47,490 --> 00:01:52,080 ‫and then on there we call the Prefetch Query method. 31 00:01:52,080 --> 00:01:55,780 ‫So to get that QueryClient, we need to use 32 00:01:57,060 --> 00:01:59,283 ‫the use QueryClient hook. 33 00:02:00,360 --> 00:02:05,360 ‫So just like we did earlier when we did Query invalidation. 34 00:02:05,460 --> 00:02:09,863 ‫So QueryClient comes from UseQueryClient. 35 00:02:14,730 --> 00:02:19,380 ‫And so then here on QueryClient 36 00:02:19,380 --> 00:02:21,693 ‫we can call PrefetchQuery. 37 00:02:23,910 --> 00:02:28,890 ‫And so now the way this works is basically exactly the same 38 00:02:28,890 --> 00:02:32,070 ‫as the UseQuery hook itself. 39 00:02:32,070 --> 00:02:34,980 ‫So we need a Query key and a Query function 40 00:02:34,980 --> 00:02:36,360 ‫inside an object 41 00:02:36,360 --> 00:02:41,250 ‫and so let's grab all of this and paste it here. 42 00:02:41,250 --> 00:02:45,660 ‫But now what we want to actually load is not this page, 43 00:02:45,660 --> 00:02:50,660 ‫but page plus one and the same thing here. 44 00:02:51,480 --> 00:02:55,443 ‫So we then also add plus one here to the Query key. 45 00:02:57,540 --> 00:02:59,430 ‫Now here there's a problem 46 00:02:59,430 --> 00:03:03,600 ‫because we are defining an object here 47 00:03:03,600 --> 00:03:07,500 ‫and so then we need to say page should be page plus one 48 00:03:07,500 --> 00:03:09,903 ‫and this is actually already it. 49 00:03:10,860 --> 00:03:13,503 ‫So if I reload now on page number five, 50 00:03:14,370 --> 00:03:18,480 ‫then notice how we get the data for page number five, 51 00:03:18,480 --> 00:03:23,223 ‫and exactly the same data, but for page number six. 52 00:03:24,150 --> 00:03:28,470 ‫And so now if I click here and go to page number six, 53 00:03:28,470 --> 00:03:32,070 ‫then the data is immediately available. 54 00:03:32,070 --> 00:03:33,540 ‫Beautiful. 55 00:03:33,540 --> 00:03:37,650 ‫So what a nice user experience this is. 56 00:03:37,650 --> 00:03:41,460 ‫And immediately the same data also got fetched 57 00:03:41,460 --> 00:03:43,140 ‫for page number seven. 58 00:03:43,140 --> 00:03:45,270 ‫So always for the next one. 59 00:03:45,270 --> 00:03:47,883 ‫So always page plus one. 60 00:03:49,710 --> 00:03:52,800 ‫So here it works again, here again 61 00:03:52,800 --> 00:03:55,590 ‫but now there should probably be an error 62 00:03:55,590 --> 00:03:59,673 ‫'cause at some point there are actually no more pages. 63 00:04:01,350 --> 00:04:03,750 ‫So yeah, now we cannot move on 64 00:04:03,750 --> 00:04:06,840 ‫but here we tried to fetch page number nine, 65 00:04:06,840 --> 00:04:10,440 ‫even though that data should actually not exist 66 00:04:10,440 --> 00:04:15,030 ‫and indeed there is no data at all in there. 67 00:04:15,030 --> 00:04:16,830 ‫Now it didn't create an error, 68 00:04:16,830 --> 00:04:20,220 ‫but of course, this is not necessary at all. 69 00:04:20,220 --> 00:04:22,260 ‫And so let's only do this here 70 00:04:22,260 --> 00:04:24,963 ‫if we are not on the last page. 71 00:04:25,860 --> 00:04:29,340 ‫So using the terminology, we only want this to run 72 00:04:29,340 --> 00:04:34,340 ‫if the page is less than the page count. 73 00:04:34,800 --> 00:04:38,340 ‫But of course we don't have that variable here yet 74 00:04:38,340 --> 00:04:40,980 ‫and so we need to compute it first. 75 00:04:40,980 --> 00:04:44,940 ‫And page count, just like in the pagination component 76 00:04:44,940 --> 00:04:49,940 ‫is equal to math.seal. 77 00:04:49,980 --> 00:04:54,087 ‫So rounding up the count, which we do have, 78 00:04:54,087 --> 00:04:57,243 ‫and then divided by page size. 79 00:04:59,400 --> 00:05:04,170 ‫All right, so let's try to go to page seven, reload. 80 00:05:04,170 --> 00:05:07,740 ‫Then it did load page number eight, but number nine 81 00:05:07,740 --> 00:05:10,593 ‫is not loaded because it doesn't exist. 82 00:05:11,580 --> 00:05:14,910 ‫So that problem is fixed 83 00:05:14,910 --> 00:05:18,720 ‫and now let's go back here because then we see 84 00:05:18,720 --> 00:05:22,890 ‫that we have basically the same issue as before. 85 00:05:22,890 --> 00:05:26,640 ‫So then, of course, these pages here haven't been loaded 86 00:05:26,640 --> 00:05:29,640 ‫because we only prefetch the next page, 87 00:05:29,640 --> 00:05:31,593 ‫but not the previous page. 88 00:05:32,460 --> 00:05:34,590 ‫Well, that's easy to fix. 89 00:05:34,590 --> 00:05:37,590 ‫We just grab this code here 90 00:05:37,590 --> 00:05:41,853 ‫and so if the page is greater than one, 91 00:05:42,960 --> 00:05:45,540 ‫so if we're not on page number one, 92 00:05:45,540 --> 00:05:50,010 ‫then we also want to prefetch page minus one. 93 00:05:50,010 --> 00:05:53,400 ‫So also the previous page. 94 00:05:53,400 --> 00:05:57,480 ‫So if I reload page five now, then it will automatically 95 00:05:57,480 --> 00:06:02,480 ‫fetch of course page five, but also six and four 96 00:06:03,090 --> 00:06:06,990 ‫and so with this, we can always comfortably move around back 97 00:06:06,990 --> 00:06:09,960 ‫and forth between all our pages 98 00:06:09,960 --> 00:06:13,710 ‫and the user will never see any loading spinner, 99 00:06:13,710 --> 00:06:17,190 ‫meaning that this looks just as if the data 100 00:06:17,190 --> 00:06:20,550 ‫would actually be paginated on the front end. 101 00:06:20,550 --> 00:06:25,020 ‫While in reality we know that this data is indeed 102 00:06:25,020 --> 00:06:26,940 ‫actually fetched from the server. 103 00:06:26,940 --> 00:06:28,860 ‫But since it is prefetched 104 00:06:28,860 --> 00:06:31,293 ‫we really do not notice it. 105 00:06:32,310 --> 00:06:35,880 ‫Now, right and this is how Prefetching works. 106 00:06:35,880 --> 00:06:37,500 ‫And we could, if we wanted, 107 00:06:37,500 --> 00:06:41,070 ‫of course Prefetch all kinds of data here. 108 00:06:41,070 --> 00:06:42,990 ‫So as soon as we load this page, 109 00:06:42,990 --> 00:06:45,900 ‫we could prefetch all of these here 110 00:06:45,900 --> 00:06:49,950 ‫and we could even prefetch entire pages basically. 111 00:06:49,950 --> 00:06:51,510 ‫So we could, for example, 112 00:06:51,510 --> 00:06:54,570 ‫prefetch always the cabins and the bookings 113 00:06:54,570 --> 00:06:57,960 ‫and so then as soon as the user reached those pages, 114 00:06:57,960 --> 00:07:01,290 ‫they would never ever see a loading spinner. 115 00:07:01,290 --> 00:07:04,140 ‫But I think that one of the best use cases 116 00:07:04,140 --> 00:07:07,593 ‫is indeed pagination as we just did in here. 117 00:07:08,460 --> 00:07:11,280 ‫Now, as an alternative to all this, 118 00:07:11,280 --> 00:07:16,170 ‫so to Prefetching and having pagination in the first place 119 00:07:16,170 --> 00:07:18,690 ‫would be to use infinite queries 120 00:07:18,690 --> 00:07:22,140 ‫for infinite scroll with React Query. 121 00:07:22,140 --> 00:07:25,920 ‫So React Query also has that feature built in 122 00:07:25,920 --> 00:07:28,890 ‫and so if you want, you can check out the documentation 123 00:07:28,890 --> 00:07:31,020 ‫and read all about that. 124 00:07:31,020 --> 00:07:33,780 ‫So I will not implement that in this application 125 00:07:33,780 --> 00:07:38,070 ‫because I think this solution here is actually better 126 00:07:38,070 --> 00:07:39,930 ‫and a bit more necessary 127 00:07:39,930 --> 00:07:42,210 ‫and so I don't want to cover, of course, 128 00:07:42,210 --> 00:07:45,210 ‫the entire library from front to back. 129 00:07:45,210 --> 00:07:49,380 ‫So I'm showing you like 80% of the most important stuff. 130 00:07:49,380 --> 00:07:51,510 ‫But if you want the other 20%, 131 00:07:51,510 --> 00:07:55,173 ‫then as always you can just go and read the documentation.