useInfiniteQuery with "gaps" in results

[erik-beus]

This question is related to #1972 but slightly different though.

We use react-window for our virtual lists together with react-window-infinite-loader in our project.

useInfiniteQuery is great when the user scrolls the list (slowly) and we can just append every page after each other and flatMap the results into an array of items.
However, when the user uses the scrollbar and scrolls a lot of rows in one go, the infinite loader will only request more data when the scrolling stops/slows down. This means we end up in a situation where we need to fetch item 1-50 and 950-1000 for instance.
In order to maintain the right position in the list, this means we actually need to fill in a lot of null values in the array for the list.
I've tried using the select option for this, and although it does work, it's a very complex solution with sorting the pageParams, filling in fake pageParams+pages etc. The benefit of this solution though, is that I'm only manipulating the data when it's received - and not on every render.

I've considered an alternative approach where I would create a Map on every render with the index being the key, and the value being the item. That would be a lot easier, but also not great performance wise.

Does react-query provide any alternatives to the above if we still want to allow users to scroll quickly to a random position of the list?

I really appreciate any input on this.
Thank you

[kinhbang89]

@erik-beus I am also having the same issue, have you figured any way to tackle it?

[erik-beus]

I used the Map approach I mentioned (on every render). So rather than having an array of all the results, I use a Map<number, Item> where the number is the index.
I create the Map based on the pages and the pageParams and can determine the "list index" based on the pageParams of every "page".

I haven't experienced any performance issues with this approach yet.

Here's an example you might be able to use for reference:

const products = new Map(
    productSearchRequest.data?.pages.flatMap((p, i) => {
      const pageParams = productSearchRequest.data.pageParams[i] as
        | { limit: number; startIndex: number }
        | undefined;
      return p.products.results.map((p, j) => [
        (pageParams?.startIndex ?? 0) + j,
        p,
      ]);
    }) ?? [],
  );