‫So let's now learn what Prefetching is
‫and how we can implement it using React Query
‫in order to make the pagination experience a lot better.
‫But what actually is prefetching?
‫Well, prefetching is all about fetching some data
‫that we know might become necessary
‫before we actually need that data to render it
‫on the user interface.
‫And in the context of pagination, usually that means
‫that we fetch the next page before it is actually displayed.
‫So in this case,
‫that would mean that here in page number seven,
‫we would already have page number eight here in the cache
‫and so then when we move there,
‫this data from page number eight could simply be get
‫from the cache and rendered.
‫While now, since we don't have that data yet,
‫it'll just load it on the fly.
‫Now, right and the same thing of course for going back.
‫So here we already have page number seven in the cache
‫but now if I go to page six,
‫it needed to load that again from the API.
‫All right and so let's make the user experience a bit better
‫by prefetching this data.
‫So right here in Use Booking.
‫So here we have the Query itself
‫and then before we return this stuff, let's have
‫or prefetching.
‫And the way this works is that we first need to QueryClient
‫and then on there we call the Prefetch Query method.
‫So to get that QueryClient, we need to use
‫the use QueryClient hook.
‫So just like we did earlier when we did Query invalidation.
‫So QueryClient comes from UseQueryClient.
‫And so then here on QueryClient
‫we can call PrefetchQuery.
‫And so now the way this works is basically exactly the same
‫as the UseQuery hook itself.
‫So we need a Query key and a Query function
‫inside an object
‫and so let's grab all of this and paste it here.
‫But now what we want to actually load is not this page,
‫but page plus one and the same thing here.
‫So we then also add plus one here to the Query key.
‫Now here there's a problem
‫because we are defining an object here
‫and so then we need to say page should be page plus one
‫and this is actually already it.
‫So if I reload now on page number five,
‫then notice how we get the data for page number five,
‫and exactly the same data, but for page number six.
‫And so now if I click here and go to page number six,
‫then the data is immediately available.
‫Beautiful.
‫So what a nice user experience this is.
‫And immediately the same data also got fetched
‫for page number seven.
‫So always for the next one.
‫So always page plus one.
‫So here it works again, here again
‫but now there should probably be an error
‫'cause at some point there are actually no more pages.
‫So yeah, now we cannot move on
‫but here we tried to fetch page number nine,
‫even though that data should actually not exist
‫and indeed there is no data at all in there.
‫Now it didn't create an error,
‫but of course, this is not necessary at all.
‫And so let's only do this here
‫if we are not on the last page.
‫So using the terminology, we only want this to run
‫if the page is less than the page count.
‫But of course we don't have that variable here yet
‫and so we need to compute it first.
‫And page count, just like in the pagination component
‫is equal to math.seal.
‫So rounding up the count, which we do have,
‫and then divided by page size.
‫All right, so let's try to go to page seven, reload.
‫Then it did load page number eight, but number nine
‫is not loaded because it doesn't exist.
‫So that problem is fixed
‫and now let's go back here because then we see
‫that we have basically the same issue as before.
‫So then, of course, these pages here haven't been loaded
‫because we only prefetch the next page,
‫but not the previous page.
‫Well, that's easy to fix.
‫We just grab this code here
‫and so if the page is greater than one,
‫so if we're not on page number one,
‫then we also want to prefetch page minus one.
‫So also the previous page.
‫So if I reload page five now, then it will automatically
‫fetch of course page five, but also six and four
‫and so with this, we can always comfortably move around back
‫and forth between all our pages
‫and the user will never see any loading spinner,
‫meaning that this looks just as if the data
‫would actually be paginated on the front end.
‫While in reality we know that this data is indeed
‫actually fetched from the server.
‫But since it is prefetched
‫we really do not notice it.
‫Now, right and this is how Prefetching works.
‫And we could, if we wanted,
‫of course Prefetch all kinds of data here.
‫So as soon as we load this page,
‫we could prefetch all of these here
‫and we could even prefetch entire pages basically.
‫So we could, for example,
‫prefetch always the cabins and the bookings
‫and so then as soon as the user reached those pages,
‫they would never ever see a loading spinner.
‫But I think that one of the best use cases
‫is indeed pagination as we just did in here.
‫Now, as an alternative to all this,
‫so to Prefetching and having pagination in the first place
‫would be to use infinite queries
‫for infinite scroll with React Query.
‫So React Query also has that feature built in
‫and so if you want, you can check out the documentation
‫and read all about that.
‫So I will not implement that in this application
‫because I think this solution here is actually better
‫and a bit more necessary
‫and so I don't want to cover, of course,
‫the entire library from front to back.
‫So I'm showing you like 80% of the most important stuff.
‫But if you want the other 20%,
‫then as always you can just go and read the documentation.