useSWRInfinite - persisting pagination in the URL query string parameters

[isBatak]

Is there an example of how to persist pagination in the page URL when using useSWRInfinite?
For example, I want to be able to share a paginated page with someone and persist the page size, also when page size changes I want to update URL.

With Next.js I can do something like this:

const onNextpage = () => {
  Router.push(`/?page=${page +1}`, null, { shallow: true });
  setSize(page +1);
}

but this will trigger two renders, so I want to do just a route change and trigger useSWRInfinite load.
Is this possible?

I can do it like this but it will also trigger two renders.

const { page } = router.query;

const { data, setSize } = useSWRInfinite(
  getPageKey, 
  fetcher,
  options, 
)

useEffect(() => {
  setSize(page);  <-- this will trigger second render
}, [page]);

const onNextpage = () => {
  router.push(`/?page=${page +1}`, null, { shallow: true });
}

The thing gets more complicated if we add more query string params, for example, sort or multiple filters.

Maybe I'm doing something wrong here, but not sure what, so please help 🙏
Thx!

[isBatak]

This is also related to the issue #804

[mjyocca]

Yeah I'm struggling to come up with a good solution to this as well.

[mmarifat]

Facing the same