useSWRInfinite with two data loading directions

[bogdan-fortum]

Hi!

I have a question about data fetching strategy or idea for a problem that I'm facing in nextjs app.

I have a bar chart that has a horizontal scroll. The x axis on the chart has months displayed as bars for each year. The idea with the chart is that when the user reaches either end of the chart with scrollbar, it should fetch additional page with year(s). There are 2 data loading scenarios here:

1. User reaches the right end of the scroll which is supposed to call the api with negative paging index that's going to load the data that comes after the data already displayed. For example if we have years 2021 and 2022 displayed in the chart, it's going to load 2023 and 2024 estimated data
2. User reaches the left end of the scroll which is supposed to call the api with positive paging index that's going to load the data that comes before the data currently displayed. For example if we already have 2021 and 2022 displayed, it's supposed to load the data for years 2020 and 2019

Consider that I'm loading 2 items per each request

I managed to load the past data, but not sure how to set the size when I need to load the future data

I was also able to do this without swr library by keeping 2 page indexes and setting each one based on the scroll direction user makes. But I'm falling short when trying to utilise the useSWRInfinite