Error boundary handling for useQueries

.all-contributorsrc

@@ -132,6 +132,8 @@
       "avatar_url": "https://avatars0.githubusercontent.com/u/5398733?v=4",
       "profile": "https://github.com/zorzysty",
       "contributions": [
+        "bug",
+        "code",
         "doc"
       ]
     },

packages/query-core/src/queriesObserver.ts

@@ -113,6 +113,10 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     return this.result
   }
 
+  getQueries() {
+    return this.observers.map((observer) => observer.getCurrentQuery())
+  }
+
   getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
     return this.findMatchingObservers(queries).map((match) =>
       match.observer.getOptimisticResult(match.defaultedQueryOptions),

packages/query-core/src/types.ts

@@ -100,6 +100,18 @@ export interface QueryOptions<
   meta?: QueryMeta
 }
 
+export type UseErrorBoundary<
+  TQueryFnData,
+  TError,
+  TQueryData,
+  TQueryKey extends QueryKey,
+> =
+  | boolean
+  | ((
+      error: TError,
+      query: Query<TQueryFnData, TError, TQueryData, TQueryKey>,
+    ) => boolean)
+
 export interface QueryObserverOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -205,12 +217,12 @@ export interface QueryObserverOptions<
    * If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`).
    * Defaults to `false`.
    */
-  useErrorBoundary?:
-    | boolean
-    | ((
-        error: TError,
-        query: Query<TQueryFnData, TError, TQueryData, TQueryKey>,
-      ) => boolean)
+  useErrorBoundary?: UseErrorBoundary<
+    TQueryFnData,
+    TError,
+    TQueryData,
+    TQueryKey
+  >
   /**
    * This option can be used to transform or select a part of the data returned by the query function.
    */

packages/react-query/src/QueryErrorResetBoundary.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 // CONTEXT
 
-interface QueryErrorResetBoundaryValue {
+export interface QueryErrorResetBoundaryValue {
   clearReset: () => void
   isReset: () => boolean
   reset: () => void

packages/react-query/src/__tests__/useQueries.test.tsx

@@ -1102,4 +1102,128 @@ describe('useQueries', () => {
       await waitFor(() => rendered.getByText('error boundary'))
     })
   })
+
+  it("should throw error if in one of queries' queryFn throws and useErrorBoundary is in use", async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const key3 = queryKey()
+    const key4 = queryKey()
+
+    function Page() {
+      useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () =>
+              Promise.reject(
+                new Error(
+                  'this should not throw because useErrorBoundary is not set',
+                ),
+              ),
+          },
+          {
+            queryKey: key2,
+            queryFn: () => Promise.reject(new Error('single query error')),
+            useErrorBoundary: true,
+            retry: false,
+          },
+          {
+            queryKey: key3,
+            queryFn: async () => 2,
+          },
+          {
+            queryKey: key4,
+            queryFn: async () =>
+              Promise.reject(
+                new Error('this should not throw because query#2 already did'),
+              ),
+            useErrorBoundary: true,
+            retry: false,
+          },
+        ],
+      })
+
+      return null
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <ErrorBoundary
+        fallbackRender={({ error }) => (
+          <div>
+            <div>error boundary</div>
+            <div>{error.message}</div>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>,
+    )
+
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('single query error'))
+  })
+
+  it("should throw error if in one of queries' queryFn throws and useErrorBoundary function resolves to true", async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const key3 = queryKey()
+    const key4 = queryKey()
+
+    function Page() {
+      useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: () =>
+              Promise.reject(
+                new Error(
+                  'this should not throw because useErrorBoundary function resolves to false',
+                ),
+              ),
+            useErrorBoundary: () => false,
+            retry: false,
+          },
+          {
+            queryKey: key2,
+            queryFn: async () => 2,
+          },
+          {
+            queryKey: key3,
+            queryFn: () => Promise.reject(new Error('single query error')),
+            useErrorBoundary: () => true,
+            retry: false,
+          },
+          {
+            queryKey: key4,
+            queryFn: async () =>
+              Promise.reject(
+                new Error('this should not throw because query#3 already did'),
+              ),
+            useErrorBoundary: true,
+            retry: false,
+          },
+        ],
+      })
+
+      return null
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <ErrorBoundary
+        fallbackRender={({ error }) => (
+          <div>
+            <div>error boundary</div>
+            <div>{error.message}</div>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>,
+    )
+
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('single query error'))
+  })
 })

packages/react-query/src/__tests__/useQuery.test.tsx

@@ -2807,6 +2807,8 @@ describe('useQuery', () => {
 
     await sleep(10)
 
+    await waitFor(() => expect(queryClient.isFetching()).toBe(0))
+
     expect(result?.data).toBe('data')
   })
 

packages/react-query/src/errorBoundaryUtils.ts

@@ -0,0 +1,72 @@
+import type {
+  DefaultedQueryObserverOptions,
+  Query,
+  QueryKey,
+  QueryObserverResult,
+  UseErrorBoundary,
+} from '@tanstack/query-core'
+import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
+import * as React from 'react'
+import { shouldThrowError } from './utils'
+
+export const ensurePreventErrorBoundaryRetry = <
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: DefaultedQueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >,
+  errorResetBoundary: QueryErrorResetBoundaryValue,
+) => {
+  if (options.suspense || options.useErrorBoundary) {
+    // Prevent retrying failed query if the error boundary has not been reset yet
+    if (!errorResetBoundary.isReset()) {
+      options.retryOnMount = false
+    }
+  }
+}
+
+export const useClearResetErrorBoundary = (
+  errorResetBoundary: QueryErrorResetBoundaryValue,
+) => {
+  React.useEffect(() => {
+    errorResetBoundary.clearReset()
+  }, [errorResetBoundary])
+}
+
+export const getHasError = <
+  TData,
+  TError,
+  TQueryFnData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>({
+  result,
+  errorResetBoundary,
+  useErrorBoundary,
+  query,
+}: {
+  result: QueryObserverResult<TData, TError>
+  errorResetBoundary: QueryErrorResetBoundaryValue
+  useErrorBoundary: UseErrorBoundary<
+    TQueryFnData,
+    TError,
+    TQueryData,
+    TQueryKey
+  >
+  query: Query<TQueryFnData, TError, TQueryData, TQueryKey>
+}) => {
+  return (
+    result.isError &&
+    !errorResetBoundary.isReset() &&
+    !result.isFetching &&
+    shouldThrowError(useErrorBoundary, [result.error, query])
+  )
+}

packages/react-query/src/useBaseQuery.ts

@@ -6,8 +6,12 @@ import { notifyManager } from '@tanstack/query-core'
 import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
 import { useQueryClient } from './QueryClientProvider'
 import type { UseBaseQueryOptions } from './types'
-import { shouldThrowError } from './utils'
 import { useIsRestoring } from './isRestoring'
+import {
+  ensurePreventErrorBoundaryRetry,
+  getHasError,
+  useClearResetErrorBoundary,
+} from './errorBoundaryUtils'
 
 export function useBaseQuery<
   TQueryFnData,
@@ -62,12 +66,9 @@ export function useBaseQuery<
     }
   }
 
-  if (defaultedOptions.suspense || defaultedOptions.useErrorBoundary) {
-    // Prevent retrying failed query if the error boundary has not been reset yet
-    if (!errorResetBoundary.isReset()) {
-      defaultedOptions.retryOnMount = false
-    }
-  }
+  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)
+
+  useClearResetErrorBoundary(errorResetBoundary)
 
   const [observer] = React.useState(
     () =>
@@ -91,10 +92,6 @@ export function useBaseQuery<
     () => observer.getCurrentResult(),
   )
 
-  React.useEffect(() => {
-    errorResetBoundary.clearReset()
-  }, [errorResetBoundary])
-
   React.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
@@ -123,13 +120,12 @@ export function useBaseQuery<
 
   // Handle error boundary
   if (
-    result.isError &&
-    !errorResetBoundary.isReset() &&
-    !result.isFetching &&
-    shouldThrowError(defaultedOptions.useErrorBoundary, [
-      result.error,
-      observer.getCurrentQuery(),
-    ])
+    getHasError({
+      result,
+      errorResetBoundary,
+      useErrorBoundary: defaultedOptions.useErrorBoundary,
+      query: observer.getCurrentQuery(),
+    })
   ) {
     throw result.error
   }

packages/react-query/src/useQueries.ts

@@ -6,6 +6,12 @@ import { notifyManager, QueriesObserver } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
 import type { UseQueryOptions, UseQueryResult } from './types'
 import { useIsRestoring } from './isRestoring'
+import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
+import {
+  ensurePreventErrorBoundaryRetry,
+  getHasError,
+  useClearResetErrorBoundary,
+} from './errorBoundaryUtils'
 
 // This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // - `context` is omitted as it is passed as a root-level option to `useQueries` instead.
@@ -184,5 +190,26 @@ export function useQueries<T extends any[]>({
     observer.setQueries(defaultedQueries, { listeners: false })
   }, [defaultedQueries, observer])
 
+  const errorResetBoundary = useQueryErrorResetBoundary()
+
+  defaultedQueries.forEach((query) => {
+    ensurePreventErrorBoundaryRetry(query, errorResetBoundary)
+  })
+
+  useClearResetErrorBoundary(errorResetBoundary)
+
+  const firstSingleResultWhichShouldThrow = result.find((singleResult, index) =>
+    getHasError({
+      result: singleResult,
+      errorResetBoundary,
+      useErrorBoundary: defaultedQueries[index]?.useErrorBoundary ?? false,
+      query: observer.getQueries()[index]!,
+    }),
+  )
+
+  if (firstSingleResultWhichShouldThrow?.error) {
+    throw firstSingleResultWhichShouldThrow.error
+  }
+
   return result as QueriesResults<T>
 }