reset error state when executing useMutation's reset

Author: vankhoawin

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 31764,
-    "minified": 16087,
-    "gzipped": 4618
+    "bundled": 31777,
+    "minified": 16088,
+    "gzipped": 4619
   },
   "dist/index.es.js": {
-    "bundled": 31223,
-    "minified": 15604,
-    "gzipped": 4516,
+    "bundled": 31236,
+    "minified": 15605,
+    "gzipped": 4517,
     "treeshaked": {
       "rollup": {
         "code": 3329,

src/__tests__/useMutation-test.js

@@ -5,7 +5,6 @@ import {
   waitForElement,
 } from '@testing-library/react'
 import * as React from 'react'
-import { act } from 'react-dom/test-utils'
 
 import { useMutation } from '../index'
 
@@ -43,4 +42,39 @@ describe('useMutation', () => {
 
     expect(getByTestId('title').textContent).toBe('')
   })
+
+  it('should be able to reset `error`', async () => {
+    function Page() {
+      const [mutate, mutationResult] = useMutation(
+        () => Promise.reject(new Error('something went wrong')),
+        {
+          throwOnError: false
+        }
+      )
+
+      return (
+        <div>
+          {mutationResult.error &&
+            <h1 data-testid="error">{mutationResult.error.message}</h1>
+          }
+          <button onClick={mutationResult.reset}>reset</button>
+          <button onClick={mutate}>mutate</button>
+        </div>
+      )
+    }
+
+    const { getByTestId, getByText, queryByTestId } = render(<Page />)
+
+    expect(queryByTestId('error')).toBeNull()
+
+    fireEvent.click(getByText('mutate'))
+
+    await waitForElement(() => getByTestId('error'))
+
+    expect(getByTestId('error').textContent).toBe('something went wrong')
+
+    fireEvent.click(getByText('reset'))
+
+    expect(queryByTestId('error')).toBeNull()
+  })
 })

src/index.js

@@ -697,7 +697,10 @@ export function useMutation(
     [refetchQueries, refetchQueriesOnFailure, throwOnError]
   )
 
-  const reset = React.useCallback(() => setData(null), [])
+  const reset = React.useCallback(() => {
+    setData(null)
+    setError(null)
+  }, [])
 
   React.useEffect(() => {
     if (useErrorBoundary && error) {