useInfiniteQuery: Explicit error handling for fetchNextPage/fetchPreviousPage

[jasongerbes]

Describe the bug

Using useInfiniteQuery, I would like to manually handle errors that occur during fetchNextPage or fetchPreviousPage, while displaying a generic message for errors that occur during initial load isLoadingError or refetch isRefetchError.

The fetchNextPage and fetchPreviousPage methods returns an isError property that can be used to show a message when a next/previous page fetch fails, however, there's no query-level property that allows you to differentiate between an initial load error, refetch error, and next/previous page fetch error.

Property	Initial Load	Refetch Page	Next Page	Previous Page
status	✅	✅	✅	✅
isError	✅	✅	✅	✅
isLoadingError	✅	❌	❌	❌
isRefetchError	❌	✅	✅	✅

Your minimal, reproducible example

https://codesandbox.io/p/devbox/dank-tdd-plsmw6

Steps to reproduce

1. Create a paginated query using useInfiniteQuery.
2. Call fetchNextPage while simulating an API error.

Note: query.isRefetchError now equals true, making it impossible to differentiate refetch errors from next/previous page fetch errors.

Expected behavior

I would expect isRefetchError to only be true when a refetch error occurs (i.e. while reloading a previously loaded page).

Notably, while fetchNextPage is loading:

• isRefetching: false
• isFetchingNextPage: true.

This suggests that perhaps there should be more granular isFetchingNextPageError and isFetchingPreviousPageError properties to handle these specific scenarios.

Property	Initial Load	Refetch Page	Next Page	Previous Page
status	✅	✅	✅	✅
isError	✅	✅	✅	✅
isLoadingError	✅	❌	❌	❌
isRefetchError	❌	✅	❌	❌
isFetchNextPageError	❌	❌	✅	❌
isFetchPreviousPageError	❌	❌	❌	✅

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Safari
• Version: 17.4.1

Tanstack Query adapter

react-query

TanStack Query version

5.35.5

TypeScript version

No response

Additional context

No response

[TkDodo]

I can see some inconsistencies here, especially with how isRefetching works. We've changed that to not be true for next / previous fetch here:

• Make isRefetching false when fetching next/previous page in an infinite query #4465

So I agree that to be consistent, isRefetchError could also be false if a next/prev fetch failed. Currently, a refetch error is defined as an error that happened while you already have data in the cache. That's why it's true for next/prev fetches as well.

The info if the last fetch was a forward / backward fetch should be available on state.fetchMeta?.fetchMore?.direction, so the suggested change should be done somewhere here:

query/packages/query-core/src/infiniteQueryObserver.ts

Lines 152 to 168 in 61f4d74

	const isFetchingNextPage =
	isFetching && state.fetchMeta?.fetchMore?.direction === 'forward'
	const isFetchingPreviousPage =
	isFetching && state.fetchMeta?.fetchMore?.direction === 'backward'
	return {
	...result,
	fetchNextPage: this.fetchNextPage,
	fetchPreviousPage: this.fetchPreviousPage,
	hasNextPage: hasNextPage(options, state.data),
	hasPreviousPage: hasPreviousPage(options, state.data),
	isFetchingNextPage,
	isFetchingPreviousPage,
	isRefetching:
	isRefetching && !isFetchingNextPage && !isFetchingPreviousPage,
	}

would you like to give it a shot at contributing ?

[jasongerbes]

Thanks for the quick response and background info. I’m happy to make a PR for this.

To make sure we’re on the same page, are you happy for me to make the following changes:

• Update isRefetchError to be false when a next/previous page fetch fails.
• Add isFetchNextPageError and isFetchPreviousPageError.
• Update docs.

[jasongerbes]

@TkDodo, I had a bit of spare time today and created a PR for these suggested changes.