chore: prefer React.use instead of throwing promises [WIP]

packages/react-query/src/suspense.ts

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type {
   DefaultError,
   DefaultedQueryObserverOptions,
@@ -8,6 +9,19 @@ import type {
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
 
+/**
+ * TODO (v6): Bump peer dependency to React 19 and use `React.use` directly.
+ */
+export function suspend<T>(promise: Promise<T>): void {
+  if (typeof React.use === 'function') {
+    // `React.use` can be called conditionally
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.use(promise)
+  } else {
+    throw promise
+  }
+}
+
 export const defaultThrowOnError = <
   TQueryFnData = unknown,
   TError = DefaultError,

packages/react-query/src/useBaseQuery.ts

@@ -14,6 +14,7 @@ import {
   ensureSuspenseTimers,
   fetchOptimistic,
   shouldSuspend,
+  suspend,
   willFetch,
 } from './suspense'
 import type {
@@ -125,7 +126,12 @@ export function useBaseQuery<
 
   // Handle suspense
   if (shouldSuspend(defaultedOptions, result)) {
-    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
+    const promise = fetchOptimistic(
+      defaultedOptions,
+      observer,
+      errorResetBoundary,
+    )
+    suspend(promise.finally(() => observer.updateResult()))
   }
 
   // Handle error boundary

packages/react-query/src/useQueries.ts

@@ -19,6 +19,7 @@ import {
   ensureSuspenseTimers,
   fetchOptimistic,
   shouldSuspend,
+  suspend,
   willFetch,
 } from './suspense'
 import type {
@@ -307,7 +308,7 @@ export function useQueries<
     : []
 
   if (suspensePromises.length > 0) {
-    throw Promise.all(suspensePromises)
+    suspend(Promise.all(suspensePromises))
   }
   const firstSingleResultWhichShouldThrow = optimisticResult.find(
     (result, index) => {