Implement a server-side pagination using React Query

[00:00] Let's create one more piece of state. In our case, it's going to be the simple use state from react back again. The initial value is going to be 1 since the first page within this API is page number 1. It's indexed from 1, not from 0. Let's make the value page, and let's make the callback set page [00:19] simply. And now let's also display the UI for the pagination. So we're going to have the button prev when clicked. It's going to move us to the previous page and again to the next page with the other button. And in between, let's just put the number of the current page. Now for a simple on [00:39] click, whenever we click on the previous button, what we're going to do is we're going to set the new page value to be previous page minus 1 simply and analogically, let's put next to be p plus 1. And deliberately, for the sake of simplicity, we're ignoring all the checks whether there is [00:59] a previous page or whether there is a next page depending on what is the number of all of the pages available, etcetera. We're just leaving this all behind. So let's see if our UI for the pagination works. And as we can see, yes, it does work. So let's take a look how can we apply this [01:19] page setting into the HTTP function. So we have the 2nd page parameter, which is currently unused. So let's remove it from here. Let's just make the filters the only parameter that is being used. And let's also extend our search params type with a new property that is basically going to [01:39] the page of type number. Now the default value is making TypeScript cry. So let's just put page equal 1 to be the default value for the filter. And let's copy this part since we're going to extend it as well within the employee query params on the level of [01:59] the React query employee query definition. And here again, we are expecting that there would be one more page. So either we can make a default value on the function executing the HTTP request level like we have over here. Alternatively, we [02:18] could also do this on this level. So it's basically a question to our design. Now this page has become a part of the key, of the query key, so there is nothing more that we should do over here. So let's now move to the component that is actually consuming [02:38] this query. So the last thing that we should put here is basically the page parameter that is becoming the part of the query key itself. So after saving, we can see that we immediately jumped into page number 3, which is definitely what we wanted. And let's move to the previous page back again. And as we toggle [02:58] between the 2nd and third, whatever pages, we can see that in these cases, React Query always have some data available in the other page, within the cache. So this is because I'm clicking the prev and next pretty frequently, and I'm just [03:18] not hitting this case when GC time would remove one of the pages after 3 seconds. And as we have seen, right now, we are on page number 3, and page number 2 have been removed. So when we click previous, then it has to be fetched back again. And again, this one is being removed. But if we keep on clicking [03:38] pretty frequently, there would be a page available within the cache. Moreover, if we cross the 15 seconds, then we would see that there would be a refetch being done in the background. But what is important, the previous value is going to be used immediately by React query, and the [03:58] name of this behavior is stale while revalidate. So when we go back to the data that we have loaded previously, we can use the old data to display, but immediately, we are re fetching the new JSON values.