Swr: Is there a way to use swrpages with a list of page numbers instead of the "load more" button?

[needcaffeine]

I love how SWRPages saves us from writing quite a bit of code, but something I still need is the ability to go between specific pages instead of just clicking "load more". Is there a way for me to do that? I appreciate any help.

[sergiodxa]

I think you can do that with useSWR without useSWRPages keeping the page number in a state (or in a query string and access it through the router).

function PaginatedList() {
  const { query: { page = 0 } } = useRouter() // Next.js useRouter hook
  const { data } = useSWR(`/api/articles?page=${page}`, fetcher)
  // render the data with a button to move to the next/prev page
}

Usually a paginated API will let you know the amount of pages as part of the response so you could get the total amount of pages from data and render it along the rest of the UI.

The main point of useSWRPages is when you want to render an infinite list of data and it let you keep the already fetched data between client-side navigations, something like Twitter, you scroll, get more tweets, click on a tweet to see the replies and then if you go back you will expect it to be in the same scroll position with the same data, that is where useSWRPages is most useful.

[shuding]

The main point of useSWRPages is when you want to render an infinite list of data
Indeed 👍

For most cases you can just use a page component:

function Page({ index }) {
  const { data } = useSWR(`/api/articles?page=${index}`)
  return ...
}

And do the pagination with the component: <Page index={x}/>. Or you can use the pattern as @sergiodxa shared.

The reason why we created useSWRPages is because in the infinite list scenario, the number of pages is dynamic, and the next page's data depends on the previous one. It's hard to tackle it yourself with React and the useSWR hook.

But currently I'm working on a refactoring which hopefully will make the documentation clearer. 🙏

[needcaffeine]

@sergiodxa @quietshu - Thanks for responding.

Right now I do in fact use the next.js useRouter hook + page number passed to useSWR exactly as you described, along with a custom pagination component. I'll just continue to do that.

I think the documentation is clear enough for my own needs already, but I'm sure it can only help more people.