@tanstack/react-query 4.5.0 → 4.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.5.0",
+    "@tanstack/query-core": "4.6.1",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

package/src/QueryErrorResetBoundary.tsx

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

package/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'))
+  })
 })

package/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')
   })
 

package/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])
+  )
+}

package/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
   }

package/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>
 }