fix(vue-query): useErrorBoundary support in useQuery and useMutation (#5826)

---------
Co-authored-by: Anton Kolesov <[email protected]>
Co-authored-by: Damian Osipiuk <[email protected]>

Author: DamianOsipiuk

packages/vue-query/src/__tests__/useMutation.test.ts

@@ -332,4 +332,24 @@ describe('useMutation', () => {
       })
     })
   })
+
+  describe('throwOnError', () => {
+    test('should evaluate throwOnError when mutation is expected to throw', async () => {
+      const err = new Error('Expected mock error. All is well!')
+      const boundaryFn = vi.fn()
+      const { mutate } = useMutation({
+        mutationFn: () => {
+          return Promise.reject(err)
+        },
+        throwOnError: boundaryFn,
+      })
+
+      mutate()
+
+      await flushPromises()
+
+      expect(boundaryFn).toHaveBeenCalledTimes(1)
+      expect(boundaryFn).toHaveBeenCalledWith(err)
+    })
+  })
 })

packages/vue-query/src/__tests__/useQuery.test.ts

@@ -235,6 +235,28 @@ describe('useQuery', () => {
     expect(status.value).toStrictEqual('pending')
   })
 
+  describe('throwOnError', () => {
+    test('should evaluate throwOnError when query is expected to throw', async () => {
+      const boundaryFn = vi.fn()
+      useQuery({
+        queryKey: ['key0'],
+        queryFn: rejectFetcher,
+        retry: false,
+        throwOnError: boundaryFn,
+      })
+
+      await flushPromises()
+
+      expect(boundaryFn).toHaveBeenCalledTimes(1)
+      expect(boundaryFn).toHaveBeenCalledWith(
+        Error('Some error'),
+        expect.objectContaining({
+          state: expect.objectContaining({ status: 'error' }),
+        }),
+      )
+    })
+  })
+
   describe('suspense', () => {
     test('should return a Promise', () => {
       const getCurrentInstanceSpy = getCurrentInstance as Mock

packages/vue-query/src/useBaseQuery.ts

@@ -7,7 +7,7 @@ import {
   watch,
 } from 'vue-demi'
 import { useQueryClient } from './useQueryClient'
-import { cloneDeepUnref, updateState } from './utils'
+import { cloneDeepUnref, shouldThrowError, updateState } from './utils'
 import type { ToRefs } from 'vue-demi'
 import type {
   DefaultedQueryObserverOptions,
@@ -146,6 +146,23 @@ export function useBaseQuery<
     )
   }
 
+  // Handle error boundary
+  watch(
+    () => state.error,
+    (error) => {
+      if (
+        state.isError &&
+        !state.isFetching &&
+        shouldThrowError(defaultedOptions.value.throwOnError, [
+          error as TError,
+          observer.getCurrentQuery(),
+        ])
+      ) {
+        throw error
+      }
+    },
+  )
+
   return {
     ...(toRefs(readonly(state)) as ToRefs<
       Readonly<QueryObserverResult<TData, TError>>

packages/vue-query/src/useMutation.ts

@@ -7,7 +7,7 @@ import {
   watch,
 } from 'vue-demi'
 import { MutationObserver } from '@tanstack/query-core'
-import { cloneDeepUnref, updateState } from './utils'
+import { cloneDeepUnref, shouldThrowError, updateState } from './utils'
 import { useQueryClient } from './useQueryClient'
 import type { ToRefs } from 'vue-demi'
 import type {
@@ -100,6 +100,18 @@ export function useMutation<
     Readonly<MutationResult<TData, TError, TVariables, TContext>>
   >
 
+  watch(
+    () => state.error,
+    (error) => {
+      if (
+        error &&
+        shouldThrowError(options.value.throwOnError, [error as TError])
+      ) {
+        throw error
+      }
+    },
+  )
+
   return {
     ...resultRefs,
     mutate,

packages/vue-query/src/utils.ts

@@ -65,3 +65,15 @@ function isPlainObject(value: unknown): value is Object {
   const prototype = Object.getPrototypeOf(value)
   return prototype === null || prototype === Object.prototype
 }
+
+export function shouldThrowError<T extends (...args: any[]) => boolean>(
+  throwOnError: boolean | T | undefined,
+  params: Parameters<T>,
+): boolean {
+  // Allow throwOnError function to override throwing behavior on a per-error basis
+  if (typeof throwOnError === 'function') {
+    return throwOnError(...params)
+  }
+
+  return !!throwOnError
+}