add reset method, tests

Author: vankhoawin

src/__tests__/useMutation-test.js

@@ -0,0 +1,43 @@
+import {
+  cleanup,
+  render,
+  fireEvent,
+} from '@testing-library/react'
+import * as React from 'react'
+import { act } from 'react-dom/test-utils'
+
+import { useMutation } from '../index'
+
+describe('useMutation', () => {
+  afterEach(cleanup)
+
+  it('should be able to reset `data`', async () => {
+    function Page() {
+      const [mutate, mutationResult] = useMutation(() => Promise.resolve('mutation'))
+
+      return (
+        <div>
+          <h1 data-testid="title">{mutationResult.data}</h1>
+          <button onClick={mutationResult.reset}>reset</button>
+          <button onClick={mutate}>mutate</button>
+        </div>
+      )
+    }
+
+    const { getByTestId, getByText } = render(<Page />)
+
+    expect(getByTestId('title').textContent).toBe('')
+
+    await act(async () => {
+      fireEvent.click(getByText('mutate'))
+    })
+
+    expect(getByTestId('title').textContent).toBe('mutation')
+
+    await act(async () => {
+      fireEvent.click(getByText('reset'))
+    })
+
+    expect(getByTestId('title').textContent).toBe('')
+  })
+})

src/index.js

@@ -668,7 +668,9 @@ export function useMutation(
     [refetchQueriesOnFailure, refetchQueries]
   )
 
-  return [mutate, { data, isLoading, error }]
+  const reset = React.useCallback(() => setData(null), [])
+
+  return [mutate, { data, isLoading, error, reset }]
 }
 
 export function useIsFetching() {