How would you merge multiple paginated lists on a page to a single endpoint?

[GorkemSahin]

Hi,

We're developing a web app using the Vercel stack, Next and SWR. We have 8 paginated lists on our dashboard, each making their own API calls using SWRInfinite.

Since executing 8 API calls is much less than ideal, we created a new endpoint in the back-end that serves the data for all of these lists. Our current solution is as follows: Dashboard's SWR hook fetches all lists (first page of each list), propagates the data to these list components as the initialData option of useSWRInfinite. So page 0 of all lists are fetched from a single endpoint, but if user goes to the 2nd page on any list, its own SWR hook takes care of that, so we're not fetching the data for 8 lists when we need the 2nd page for only one of them.

The problem we're facing here is the timed interval causing all SWR hooks to fire API calls. We end up with 9 now instead of 8.

Ideally, we'd like to use dashboard's SWR hook for all lists that are at page 0, and only utilize the individual SWR hook of a list in case user goes to the next page on one of them.

I hope I was able to describe the issue well enough. What would you recommend?

[ramyareye]

It gonna be a little messy but I think you can manage all the data with a useReducer and different actions (like init and nextPage) on top of SWR.