`QueryErrorResetBoundary` not reset after throwing error in component with `useSuspenseQuery`

[visualjerk]

Describe the bug

When throwing an error from a useSuspenseQuery like described here resetting the QueryErrorResetBoundary does not reset the error in useSuspenseQuery.

This happens when the error occurs on a subsequent fetch. It works as expected, if the error occurs while fetching data initially.

Your minimal, reproducible example

https://stackblitz.com/edit/github-vmd3m2?file=src%2Fcomponents%2FProjects.jsx

Steps to reproduce

1. Click on "Show Projects"
2. Click on "Refresh"
3. Click on "Try again"
4. The ErrorBoundary fallback is still shown

Expected behavior

After 3. the Suspense fallback should be shown and after a short while the project list should be shown.

How often does this bug happen?

Everytime

Screenshots or Videos

query-suspense-error-handling.mov

No response

Platform

• OS: MacOS 14.4.1
• Browser: Chrome 124.0.6367.209

Tanstack Query adapter

react-query

TanStack Query version

5.37.1

TypeScript version

No response

Additional context

No response

[TkDodo]

I think there is one render cycle in between where we are still in error state. I need to look into this. A quick workaround would be:

-if (error) {
+if (error && !isFetching) {
  throw error;
}

[TkDodo]

Ah, I see what's going on. So errors are kept if you have already fetched data successfully once before, that is on purpose:

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

Lines 631 to 635 in e3240f0

	...(data === undefined &&
	({
	error: null,
	status: 'pending',
	} as const)),

we only reset back to a pending state for errors where we have no data yet. So I think the docs are wrong and checking for !isFetching is actually required.

Can you maybe file a PR to the docs?

[visualjerk]

Thank you so much! Really appreciate your quick and helpful responses ❤️