experimental_prefetchInRender does not work with useQueryErrorResetBoundary

Describe the bug

I think there is something something missing with how errors are reset when using useQuery().promise. Which leads to the error boundary only being reset on the second try.

The problem is that you would use useQuery().promise differently from useSuspenseQuery():

With useSuspenseQuery(), you would have your <Suspense> and <ErrorBoundary> somewhere up the component tree from useSuspenseQuery:

const App = () => {
  const { reset } = useQueryErrorResetBoundary();
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <ErrorBoundary 
        fallbackRender={({ resetErrorBoundary }) => <button type="button" onClick={resetErrorBoundary}>Retry</button>}
        onReset={reset}
      >
        <Page />
      </ErrorBoundary>
    </Suspense>
  );
}

const Page = () => {
  const { data } = useSuspenseQuery(/* ... */);

  // do something with the data
}

With useQuery().promise, you have <Suspense> and <ErrorBoundary> in the same component as useQuery():

const App = () => <Page />;

const Page = () => {
  const promiseData = useQuery({ experimental_prefetchInRender: true, /* ... */ }).promise;
  const { reset } = useQueryErrorResetBoundary();

  return (
    <Suspense fallback={<span>Loading...</span>}>
      <ErrorBoundary 
        fallbackRender={({ resetErrorBoundary }) => <button type="button" onClick={resetErrorBoundary}>Retry</button>}
        onReset={reset}
      >
        <MySubComponent promiseData={promiseData} />
      </ErrorBoundary>
    </Suspense>
  );
}

const MySubComponent = ({ promiseData }) => {
  const data = React.use(promiseData);

  /* do something with the data */
}

The problem is that the query will not be retried if you click the retry-button in the second example. I think the problem is that the current mechanism relys on the component that contains useQuery() (or useSuspenseQuery for that matter) to re-mount. Which of course does not happen in the second example.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/admiring-bas-xgdrjg

Steps to reproduce

Open Codesandbox
Wait for the requests to finish: Both show a retry button
Click retry button in first line (useSuspenseQuery())
Click retry button in second line (useQuery().promise

Expected behavior

Both retry button should work the same: When you click them, the query is retried.
This, however, does only work for the useSuspenseQuery option. Not the useQuery().promise.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: macOS
Browsers: any that I tried (Firefox, Safari, Edge)

Tanstack Query adapter

react-query

TanStack Query version

5.90.12

TypeScript version

No response

Additional context

No response

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

Create Plan

Examples

_{You can configure auto-planning by selecting labels in the issue_enrichment configuration.}

🔗 Similar Issues

Possible Duplicates

ISSUE-9939

Related Issues

useInfiniteQuery + experimental_prefetchInRender never finishes loading after error boundary reset #9939
useInfiniteQuery + experimental_prefetchInRender uses error boundary for subsequent pages #9938
Suspenseful in SolidJS doesn't bubble errors to the nearest ErrorBoundary #9851
useSuspenseQuery doesn't throwOnError when used with refetchInterval #8985
Query caches error result and never calls queryFn #9728

🔗 Related PRs

#9576 - fix(core): do not reject promise right away - only when promise gets used [merged]
#9639 - fix(query-core, react-query): infinite re-renders in useQueries [merged]
#9752 - Fix unhandled promise rejections during de/rehydration of pending queries [merged]
#9772 - fix(core): observing "promise" needs to implicitly observe "data" [merged]
TanStack/router#5740 - test(solid-start-ssr-query): remove experimental_prefetchInRender [merged]
#9886 - fix: Prevent infinite render loops when useSuspenseQueries has duplicate queryKeys [merged]

👤 Suggested Assignees

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

I was just about the file an issue for the same thing.

experimental_prefetchInRender example demonstrating the issue
useSuspenseQuery example for comparison

test(react-query): add reproduction test for useQuery().promise retry…

I observed experimenting with useQuery().promise as well, and this behavior was a bit surprising. From a consumer's perspective, both patterns end up using Suspense + ErrorBoundary, so it's easy to expect the retry behavior to be consistent.

If experimental_prefetchInRender intentionally changes the lifecycle here, it might be worth documenting that useQueryErrorResetBoundary won't trigger a retry in this setup. Otherwise, having the retry behavior match useSuspenseQuery would make switching between the two APIs a lot more predictable.

this experimental flag is likely to get removed because it creates too much trouble.

@TkDodo

@TkDodo Is there or will there be any alternative to this experimental flag?

Currently best approach is to just useSuspenseQuery

@TkDodo

@TkDodo This hook isn't quite right for me, as it has to be called inside a Suspense wrapper.

In my case, I'm using the experimental flag in useQuery, receiving and passing a promise to my Component through props or React Context, which resolves it via React.use(). And I'm wrapping my Component in Suspense. I can also use multiple consumers of this promise and define their own Suspense for each. Ex:

  const { promise } = useQuery({
    ...
    experimental_prefetchInRender: true,
  })


  return (
    <ErrorBoundary>
      <Suspense fallback={<Component1Fallback />}>
          <Component1 promise={promise} />
      </Suspense>

      <Suspense fallback={<Component2Fallback />}>
          <Component2 promise={promise} />
      </Suspense>
    </ErrorBoundary>
  )

Is there an alternative that would allow me to maintain my approach and structure?

replace useQuery with usePrefetchQuery and call useSuspenseQuery in the child components

@TkDodo

@TkDodo thank you

Navigation Menu

Repository navigation

`experimental_prefetchInRender` does not work with `useQueryErrorResetBoundary` #9978

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

Tanstack Query adapter

TanStack Query version

TypeScript version

Additional context

📝 CodeRabbit Plan Mode

🔗 Similar Issues

🔗 Related PRs

👤 Suggested Assignees

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

experimental_prefetchInRender does not work with useQueryErrorResetBoundary #9978

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

Tanstack Query adapter

TanStack Query version

TypeScript version

Additional context

Activity

coderabbitai commented on Dec 17, 2025

📝 CodeRabbit Plan Mode

🔗 Similar Issues

🔗 Related PRs

👤 Suggested Assignees

OliverJAsh commented on Dec 18, 2025

vaibh36 commented on Jul 28, 2026

TkDodo commented on Aug 18, 2026

vzarayskiy commented on Aug 18, 2026

TkDodo commented on Aug 18, 2026

vzarayskiy commented on Aug 19, 2026

TkDodo commented on Aug 19, 2026

vzarayskiy commented on Aug 19, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`experimental_prefetchInRender` does not work with `useQueryErrorResetBoundary` #9978