`experimental_prefetchInRender` refetches when it unsuspends

[OliverJAsh]

Describe the bug

const query = queryOptions({
 queryKey: ['foo'],
 queryFn: async () => {
 console.log('fetch');
 await new Promise((resolve) => setTimeout(resolve, 1000));
 return [];
 },
});

const Example: FC = () => {
 // ✅ This runs the `queryFn` once.
 // useSuspenseQuery(query);

 // ❌ This runs the `queryFn` twice. See console logs.
 const { promise } = useQuery({
 ...query,
 experimental_prefetchInRender: true,
 });
 React.use(promise);

 return <div>loaded</div>;
};

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-5tk7d9bg?file=src%2Findex.tsx&preset=node

Steps to reproduce

See above.

Expected behavior

queryFn is only called once.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

N/A

Tanstack Query adapter

None

TanStack Query version

5.90.12

TypeScript version

No response

Additional context

Note this happens even when use is in a child component:

const Child: FC<{ promise: Promise<any> }> = ({ promise }) => {
 React.use(promise);

 return <div>loaded</div>;
}

const Example: FC = () => {
 const { promise } = useQuery({
 ...query,
 experimental_prefetchInRender: true,
 });
 
 return <Child promise={promise} />;
};

[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

---

🔗 Similar Issues

Related Issues

• experimental_prefetchInRender doesn't work with useQueries #9988
• queryFn erroneously called in useSuspenseQuery dependent on serial prefetch #8828

🔗 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]
#9772 - fix(core): observing "promise" needs to implicitly observe "data" [merged]
#9886 - fix: Prevent infinite render loops when useSuspenseQueries has duplicate queryKeys [merged]

👤 Suggested Assignees

• TkDodo
• OliverJAsh
• TrevorBurnham
• m2na7
• olivierbeaulieu

---

🧪 Issue enrichment is currently in open beta.

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

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!

[Einere]

I believe the pattern should be slightly different. 🤔

According to the documentation, the component calling use() should be wrapped in Suspense like this:

function Parent() {
 const query = useQuery(...);
 
 return (
 <Suspense falback={...}>
 <Child query={query}/>
 </Suspense>
 );
}

function Child({query}) {
 const data = use(query.promise);
}

If you wrap the Parent component with Suspense instead, the Parent will unmount whenever the promise is caught. This might lead to unexpected behavior, such as the queryFn being called twice. 😄

[OliverJAsh]

I would have expected this to behave the same as useSuspenseQuery where the same component is both using the query and suspending. But if that's not how it's designed to work then I guess we can close this.

[TkDodo]

You can (currently) suspend the component that calls useQuery, but if it then re-mounts and you have a staleTime of zero, you will see a background refetch. useSuspenseQuery works around that by setting a staleTime of at least 1second.