feat: switch to use instead of throwing promises

Author: TkDodo

packages/react-query/src/suspense.ts

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import type { DefaultError } from '@tanstack/query-core'
 import type {
   DefaultedQueryObserverOptions,
@@ -30,6 +31,40 @@ export const ensureStaleTime = (
   }
 }
 
+export const use =
+  // React18 doesn't have `use`
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  React.use ||
+  (<T>(
+    thenable: Promise<T> & {
+      status?: 'pending' | 'fulfilled' | 'rejected'
+      value?: T
+      reason?: unknown
+    },
+  ): T => {
+    switch (thenable.status) {
+      case 'pending':
+        throw thenable
+      case 'fulfilled':
+        return thenable.value as T
+      case 'rejected':
+        throw thenable.reason
+      default:
+        thenable.status = 'pending'
+        thenable.then(
+          (v) => {
+            thenable.status = 'fulfilled'
+            thenable.value = v
+          },
+          (e) => {
+            thenable.status = 'rejected'
+            thenable.reason = e
+          },
+        )
+        throw thenable
+    }
+  })
+
 export const willFetch = (
   result: QueryObserverResult<any, any>,
   isRestoring: boolean,

packages/react-query/src/useBaseQuery.ts

@@ -10,7 +10,12 @@ import {
   getHasError,
   useClearResetErrorBoundary,
 } from './errorBoundaryUtils'
-import { ensureStaleTime, fetchOptimistic, shouldSuspend } from './suspense'
+import {
+  ensureStaleTime,
+  fetchOptimistic,
+  shouldSuspend,
+  use,
+} from './suspense'
 import type { UseBaseQueryOptions } from './types'
 import type {
   QueryClient,
@@ -99,7 +104,7 @@ export function useBaseQuery<
     // Do the same thing as the effect right above because the effect won't run
     // when we suspend but also, the component won't re-mount so our observer would
     // be out of date.
-    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
+    use(fetchOptimistic(defaultedOptions, observer, errorResetBoundary))
   }
 
   // Handle error boundary

packages/react-query/src/useQueries.ts

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