`experimental_prefetchInRender` does not work with `useQueryErrorResetBoundary`

[Lukas-Kullmann]

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

1. Open Codesandbox
2. Wait for the requests to finish: Both show a retry button
3. Click retry button in first line (useSuspenseQuery())
4. 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

[coderabbitai]

📝 CodeRabbit Plan Mode

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

• Create Plan

Examples

• Example 1
• Example 2

_{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

• OliverJAsh
• TkDodo
• MarkSFrancis
• misoguy
• travikk

---

🧪 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!

[OliverJAsh]

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

• experimental_prefetchInRender example demonstrating the issue
• useSuspenseQuery example for comparison