Pagination example with page numbers?

Our backend uses page number for pagination (first page is 0, second page is 1, and so on). What would be the correct way to implement that with useSWRPages()?

My current implementation works so that I’m using this as my swrDataToOffset function:

data => !data || !pages || pages.length === 0 ? 0 : pages.length - 1

---

Also, I’m not sure if it’s a problem with my implementation, but as I’m trying useSWRPages() out in our Next.js application, I’m getting this exception when the application is hot reloaded (HMR) and there were several pages fetched before the reload:

Warning: Encountered two children with the same key, `page-2`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[roxeteer]

I think got rid of the exceptions by changing the swrDataToOffset function to return pages.length instead of pages.length - 1. But now after loading more data after SWR displays the cached data, I get the last page again. I’ll try to create a simplified version of our component for an example.

One more thing: is there a way for a page to tell that there will be no more data available (so I could hide the element triggering a fetch)? Now I get more and more pages even if they are empty. Returning null from the page component doesn’t seem to have an effect.

[shuding]

Hi @grazianodev !

I noticed the exact same bug as you had, and already created a PR to fix it (there’s also an example): https://github.com/zeit/swr/pull/95

We will review and ship it today in the next version, will let you know!