Repository: tannerlinsley/react-query
Pull request #3390 (2022-03-13 19:17:36)

fix(mutations): allow passing a function to useErrorBoundary

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/tanstack/react-query/94eTUwpxuYGTFaHMQYuy6DKxnWqe](https://vercel.com/tanstack/react-query/94eTUwpxuYGTFaHMQYuy6DKxnWqe)  
✅ Preview: *In Progress*


codesandbox[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/tannerlinsley/react-query/pr/3390/builds/227822) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f236a000e09bcec873182d9b1f57ded2f4ff9df6:

|Sandbox| Source |
|--|--|
|[tannerlinsley/react-query](https://codesandbox.io/s/tannerlinsley-react-query-703xpj)| Configuration |
|[tannerlinsley/react-query: basic-typescript](https://codesandbox.io/s/tannerlinsley-react-query-basic-typescript-4v28p8)| Configuration |

codecov[bot]: # [Codecov](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley) Report
> Merging [#3390](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley) (f236a00) into [alpha](https://codecov.io/gh/tannerlinsley/react-query/commit/bc7263d43ad628dfe09e244676d625963ec350db?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley) (bc7263d) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/tannerlinsley/react-query/pull/3390/graphs/tree.svg?width=650&height=150&src=pr&token=jqEbswkEDQ&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley)](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley)

```diff
@@           Coverage Diff           @@
##            alpha    #3390   +/-   ##
=======================================
  Coverage   96.85%   96.85%           
=======================================
  Files          44       44           
  Lines        2318     2318           
  Branches      671      671           
=======================================
  Hits         2245     2245           
  Misses         70       70           
  Partials        3        3           
```


| [Impacted Files](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley) | Coverage Δ | |
|---|---|---|
| [src/reactjs/useMutation.ts](https://codecov.io/gh/tannerlinsley/react-query/pull/3390/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley#diff-c3JjL3JlYWN0anMvdXNlTXV0YXRpb24udHM=) | `100.00% <100.00%> (ø)` | |
| [src/reactjs/utils.ts](https://codecov.io/gh/tannerlinsley/react-query/pull/3390/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley#diff-c3JjL3JlYWN0anMvdXRpbHMudHM=) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley). Last update [bc7263d...f236a00](https://codecov.io/gh/tannerlinsley/react-query/pull/3390?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Tanner+Linsley).


Patch:
diff --git a/src/reactjs/useMutation.ts b/src/reactjs/useMutation.ts
index 0427befc6..63a13ef40 100644
--- a/src/reactjs/useMutation.ts
+++ b/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,
     ])
   ) {
diff --git a/src/reactjs/utils.ts b/src/reactjs/utils.ts
index 4b69f2a97..916982036 100644
--- a/src/reactjs/utils.ts
+++ b/src/reactjs/utils.ts
@@ -1,5 +1,5 @@
 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
@@ -7,5 +7,5 @@ export function shouldThrowError<T extends (...args: any[]) => boolean>(
     return _useErrorBoundary(...params)
   }
 
-  return _useErrorBoundary
+  return !!_useErrorBoundary
 }


Test patch:
diff --git a/src/reactjs/tests/useMutation.test.tsx b/src/reactjs/tests/useMutation.test.tsx
index 24b9f41c2..ff5597ba6 100644
--- a/src/reactjs/tests/useMutation.test.tsx
+++ b/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()