From the course: TanStack Query: Efficient Data Fetching and State Management

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Implementing pagination

Implementing pagination

- [Instructor] Building on our repository list let's now add pagination using TanStack Queries keep previous data feature. So we're going to add some pagination here so that we can click through these and we'll start by adding this page number to our fetch user repos function. So that's going to just set, we'll say page equals one. That will be our default there. And then we'll just say number here. So here we're going to use the page inside of the fetch. So we'll say page three, ampersand. Page equals page. Cool. So that's just going to say give me page one, two, three, four, whatever it might be. So all of this is going to be handled inside of the component. So that's going to look similar to what you would expect. Line 1 here, we'll say const page and set page. We're going to set that equal to useState with an initial state of one. Then we can add to our query key, page and then to fetchUserRepos this is now taking in both of these variables, username and page. So let's also do…

Contents