`experimental_prefetchInRender` doesn't work with `useQueries`

[OliverJAsh]

Describe the bug

const query = queryOptions({
  queryKey: ['foo'],
  queryFn: async () => [],
  experimental_prefetchInRender: true,
});

const Example: FC = () => {
  // ✅ This finishes loading.
  // const { promise } = useQuery(query);

  // ❌ This never finishes loading.
  const [{ promise }] = useQueries({ queries: [query] });

  React.use(promise);

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

Your minimal, reproducible example

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

Steps to reproduce

See above.

Expected behavior

experimental_prefetchInRender works with useQueries.

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

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

---

🔗 Similar Issues

Related Issues

• useInfiniteQuery + experimental_prefetchInRender never finishes loading after error boundary reset #9939

🔗 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]
#9822 - fix(solid-query): enable experimental_prefetchInRender by default for… [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

• TkDodo
• birkskyum
• OliverJAsh
• 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!

[TkDodo]

Currently not implemented in useQueries. I think we should generally disallow suspending the same component that calls useQuery and get rid of the experimental flag. I think it's too hacky. What you'd need to do is to pass the promise to a separate component and wrap that in suspense.

[isaackaara]

I've submitted a fix in #10218. The issue is that useQueries was missing the experimental_prefetchInRender logic that useBaseQuery implements. The fix adds the same prefetch-in-render handling to useQueries, iterating over each query to trigger optimistic fetches or subscribe to cache promises as needed.

[TkDodo]

we’ll get rid of this experimental flag.