Attempting to use RTKQuery for infinite scrolling list

[acolchagoff]

I've got a page that displays a list of items. the problem is that is discarding requests seemingly at random especially when the user scrolls quickly. What am I doing wrong?

here is my react:

  const filterUIValues = useSelector(selectItemsFilterUIValues);
  const [filters, setFilters] = useState(filterUIValues);
  const [page, setPage] = useState(1);

  // Go back to page 1 if filters are modified
  if (filterUIValues !== filters) {
    setFilters(filterUIValues);
    setPage(1);
  }

  // handle when user scrolls past currently loaded rows
  const handleOnFetchRows = useDebouncedCallback(() => {
    if (total === 0) return;
    if (rowsPerPage * page >= total) return;
    setPage(page + 1);
  }, 500);

  console.log('calling useGetQuery with page', page);
  const { data: { items: itemPages = [], total = 0 } = {} } = useGetItemsQuery({
    params: filterUIValues,
    page,
  });

  console.log(itemPages);

  const itemBaseList = itemPages.flat();

Here is my RTKQuery Api:

export const ItemApi = apiServiceExtension.injectEndpoints({
  endpoints: (builder) => ({
    getItems: builder.query<ItemApiResponse, GetItemParams>({
      query: ({ params, page }) => {
        console.log('query', page);
        const queryObject = { page, ...params };
        return {
          url: `items?${objectToQueryString(queryObject)}`,
          method: 'GET',
        };
      },
      serializeQueryArgs: ({ endpointName }) => {
        return endpointName;
      },
      // Always merge incoming data to the cache entry
      merge: (currentCache, newItems, { arg }) => {
        console.log('merge', arg.page);
        if (arg.page === 1) {
          return newItems;
        }
        currentCache.items[arg.page - 1] = newItems.items[0];

        return currentCache;
      },
      // Refetch when the page arg changes
      forceRefetch({ currentArg, previousArg }) {
        console.log('forceRefresh', currentArg?.page);
        return currentArg?.page !== previousArg?.page;
      },
      providesTags: (_result, _error) => [{ type: 'Items', id: 'PARTIAL-LIST' }],
    }),
  }),
  overrideExisting: false,
});

My console after scrolling around for a bit:

As you can see in the console.log, RTKQuery simply discarded the requests for pages 4, 5, and 6, and proceeded directly to 7. This is a problem as chunks of the list are missing. Everything works fine so long as the user scrolls slowly, but I can't count on that. I need something that will request all the data in question based on the user's scrolling.

Context: I'm using MUI DataGrid and I do not have a whole lot of flexibility on how I implement this. The only supplied option is a callback function that fires when the user scrolls down and hits unloaded rows.

[markerikson]

The approach you've got there is an admittedly hacky and not good way of implementing infinite queries.

We've got a draft PR over at #4393 that is intended to add real infinite query support to RTKQ - could you give that PR preview build a try and use the new builder.infiniteQuery() API for that endpoint?

That said, I don't know why RTKQ might be dropping requests in this case.

[acolchagoff]

The approach you've got there is an admittedly hacky and not good way of implementing infinite queries.

I'm open to alternative approaches, it became more complex as I started digging for reasons for the missing data.

We've got a draft PR over at #4393 that is intended to add real infinite query support to RTKQ - could you give that PR preview build a try and use the new builder.infiniteQuery() API for that endpoint?

I'll check it out, If I can get an alternative build working, I'll try it, and give feedback. Unfortunately, I still need to implement with the current stable release as this is for work and I need something we can ship to production.

That said, I don't know why RTKQ might be dropping requests in this case.

It feels like a bug, but I didn't want to report it as an issue because I'm not certain. It appears that if a request is in progress subsequent requests are discarded. once merge() resolves, additional requests can be made.

I've managed to work around this with some hacky state management for paging...

  // handle when user scrolls past currently loaded rows
  const handleOnFetchRows = useDebouncedCallback(() => {
    if (total === 0) return;
    if (rowsPerPage * pageObj.page >= total) return;

    // sometimes pages load out of order and we need to grab ones that are missing
    let missingPage = -1;
    for (let i = 1; i <= pageObj.page; i++) {
      if (!itemPages[i - 1]) {
        missingPage = i;
        break;
      }
    }
    console.log('missingPage', missingPage);
    const nextPage = missingPage === -1 ? pageObj.page + 1 : missingPage - 1;
    setPageObj({ page: nextPage + 1 });
  }, 500);

[acolchagoff]

It looks like my take isn't quite right, RTK Query can get into a state where it thinks a particular request has been cached when it has not been, so it will never resolve a missing page:

[markerikson]

Bugs are always possible, but we'd really need a reproduction (or a Replay ) in order to investigate this.