useInfiniteQuery causing multiple requests with same key

[Lars418]

Hi,

I've build a DataGrid using MUI-X DataGrid Pro. To fetch data, I use TanStack query.
I'm fetching data using the following useInfiniteQuery hook:

    const { data: users, fetchStatus, fetchNextPage, isFetchingNextPage } = useInfiniteQuery(['admin/user'], adminQuery.getUsers, {
        refetchOnMount: true,
        staleTime: undefined,
        getNextPageParam: (lastPage, pages) => {
            return lastPage.paginationToken;
        },
    });

To trigger fetching a new page, I use the following function which I passed as a prop the datagrid:

    const handleOnRowsScrollEnd: DataGridProProps['onRowsScrollEnd'] = async (params) => {
        if (isFetchingNextPage) {
            return;
        }

        await fetchNextPage();
    };

When approaching the end of the DataGrid, handleOnRowsScrollEnd() does get called and the nextPageParam (a pagination token) gets appended to the query url. Assuming a possible paginationToken would be test-123 the network tab (devtools) shows the following requests:

GET /endpoint?token=test-123 HTTP/1.1
GET /endpoint?token=test-123 HTTP/1.1
GET /endpoint?token=test-123 HTTP/1.1

This results in the datagrid showing the same data three times.

Am I missing something here or why does the nextPageParam (pagination token) not update accordingly?

[TkDodo]

hmm, I'd need to see that in a reproduction please. It could be that handleOnRowsScrollEnd is called multiple times and closuring over isFetchingNextPage will still yield false. If that's the case you might need to track the fetchNextPage with a ref to avoid fetchNextPage be called multiple times. But it's all guesswork without a reproduction

[Lars418]

Should have clarified that more, the three example requests don't get called immediately after the previous request has been send. But the token get's somehow persisted, so when scrolling down once, test-123 is used and after the data has been loaded and I proceed scrolling down, test-123 is used again even though the first request returned a new pagination token.

A better representation would probably be

// User scrolls down
GET /endpoint?token=test-123 HTTP/1.1
// User scrolls down again
GET /endpoint?token=test-123 HTTP/1.1
// User scrolls down again
GET /endpoint?token=test-123 HTTP/1.1