React Infinite Query - previous page on random order/spots

[spandzgit]

I've implemented a virtual scroll of millions of records using react-query and react-virtual on top. It works pretty well on incremental scrolling from record 1 ... N.

There is a new requirement for random scrolling and fetching the data corresponding to that position. I have implemented it in a way where I'm looking at the lastItem.index and data.length to find out if it's at the end and fetching the last set of records by passing the specific lastPage in pageParam.

Also for going back for a scenario like this. If I have 10000 records in total.
I'm fetching the first 500
[1...... 500]
Scrolling to the bottom and fetching the last 500
[9501..... 10000].

This works pretty well and in react-query cache the Data is also in the right order. Data - Pages

  0 : [1...... 500]
  1 : [9501..... 10000]

While I'm going up scrolling backward and using fetchPreviousPage with pageParam: lastPageParam - 1 and firing off the fetch correctly - the data which is coming back is getting added in the react-query cache at the top instead of its proper position which in this case it's between 0 and 1 in Data - Pages. Its getting set as -

  0 : [9001..... 9500]
  1 : [1...... 500]
  2 : [9501..... 10000]

Whereas I'm expecting it to get set at the correct position which is -

  0 : [1...... 500]
  1 : [9001..... 9500]
  2 : [9501..... 10000]

Is this possible using react-infinite-query? Any advice/suggestion will really help! Appreciate it - Thanks!

[spandzgit]

Thanks, @erik-beus #1982 gave the idea of sorting the data by recordNum which got the order for the list of records to be correct. 🙏