First call to useInfiniteQuery()'s fetchMore() re-fetches initial page instead of a new one

[danielbrauer]

Describe the bug
The first call to fetchMore() does not seem to actually fetch more, but instead re-fetches the initial data set.

To Reproduce

1. Click the Fetch More button in this example a few times:
   https://codesandbox.io/s/confident-dawn-67yb2?file=/src/App.tsx
2. Note in the console that the fetch function is called twice with the initial index: once on page load, and once with the first click of the button. Subsequent clicks appear to work as expected

Expected behavior
Every call to fetchMore() should get more data, rather than getting data we already have.

[tannerlinsley]

I think this is a bug. We should make fetchMore cancel any background refreshes to make sure this doesn't happen.

[kostia1st]

@danielbrauer the issue in your example is because refetchOnWindowFocus is by default set to true. Try disabling it at line 37 in your example:

https://codesandbox.io/s/infinite-query-typescript-example-forked-owtp9

[danielbrauer]

@danielbrauer the issue in your example is because refetchOnWindowFocus is by default set to true.

The issue does only seem to be present when refetchOnWindowFocus enabled, so perhaps it's a problem with the implementation of that option. I wouldn't expect window focus options to have any effect on behaviour while continuously focused.

[boschni]

Seems to work correctly with the latest version: https://jpthy.csb.app/

[maciejmyslinski]

@boschni @tannerlinsley it doesn't seem to be working properly in the example provided (https://jpthy.csb.app/)

You can see that on the first click, the second page should be fetched. Instead, the second page is being fetched on the second click.

I have the same issue in my app. I believe this issue should be reopened.

[tannerlinsley]

This may be a bug, but it's likely due to window refetching. When you click on the window (and the button) at the same time from being unfocused (as is normal when you are working in devtools or codesandbox), the window focus will trigger a refresh and start refetching the whole query in the background. Subsequently, when the button is pressed immediately after, the refetch is already in progress, so the action is deduped and essentially ignored. Same thing happens here:

• Fetch 3 pages
• Focus another window
• Click the fetch more button as you focus the window again

The query will be refetched instead of the next page being fetched.

What should probably happen to fix this issue: Fetch more actions should cancel refetches before attempting to fetch the next page. A decent way to test this in your example is like this:

setTimeout(() => {
  queryCache.cancelQueries("items");
  items.fetchMore();
});

[tannerlinsley]

I also have a sneaking suspicion that this is a regression...

[boschni]

In the latest version any current fetches should now be cancelled. In the codebox the button is disabled while it is fetching though, which means you cannot click the button if the list is being fetched because of window focus.

[danielbrauer]

I think the behaviour is correct, and the codebox example should instead be using items.isFetchingMore as boolean to disable the button.