experimental_prefetchInRender refetches when it unsuspends #9989
Description
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} />;
};