fix(mutations): allow passing a function to useErrorBoundary (#3390)

Author: TkDodo

src/reactjs/tests/useMutation.test.tsx

@@ -659,6 +659,57 @@ describe('useMutation', () => {
     })
   })
 
+  it('should be able to throw an error when useErrorBoundary is a function that returns true', async () => {
+    let boundary = false
+    function Page() {
+      const { mutate, error } = useMutation<string, Error>(
+        () => {
+          const err = new Error('mock error')
+          err.stack = ''
+          return Promise.reject(err)
+        },
+        {
+          useErrorBoundary: () => {
+            boundary = !boundary
+            return !boundary
+          },
+        }
+      )
+
+      return (
+        <div>
+          <button onClick={() => mutate()}>mutate</button>
+          {error && error.message}
+        </div>
+      )
+    }
+
+    const { getByText, queryByText } = renderWithClient(
+      queryClient,
+      <ErrorBoundary
+        fallbackRender={() => (
+          <div>
+            <span>error boundary</span>
+          </div>
+        )}
+      >
+        <Page />
+      </ErrorBoundary>
+    )
+
+    // first error goes to component
+    fireEvent.click(getByText('mutate'))
+    await waitFor(() => {
+      expect(queryByText('mock error')).not.toBeNull()
+    })
+
+    // second error goes to boundary
+    fireEvent.click(getByText('mutate'))
+    await waitFor(() => {
+      expect(queryByText('error boundary')).not.toBeNull()
+    })
+  })
+
   it('should pass meta to mutation', async () => {
     const errorMock = jest.fn()
     const successMock = jest.fn()

src/reactjs/useMutation.ts

@@ -116,7 +116,7 @@ export function useMutation<
 
   if (
     currentResult.error &&
-    shouldThrowError(!!obsRef.current.options.useErrorBoundary, [
+    shouldThrowError(obsRef.current.options.useErrorBoundary, [
       currentResult.error,
     ])
   ) {

src/reactjs/utils.ts

@@ -1,11 +1,11 @@
 export function shouldThrowError<T extends (...args: any[]) => boolean>(
-  _useErrorBoundary: boolean | T,
+  _useErrorBoundary: boolean | T | undefined,
   params: Parameters<T>
 ): boolean {
   // Allow useErrorBoundary function to override throwing behavior on a per-error basis
   if (typeof _useErrorBoundary === 'function') {
     return _useErrorBoundary(...params)
   }
 
-  return _useErrorBoundary
+  return !!_useErrorBoundary
 }