Skip to content

Commit a0a7c44

Browse files
committed
update README and CHANGELOG
1 parent 578e417 commit a0a7c44

File tree

2 files changed

+35
-1
lines changed

2 files changed

+35
-1
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
- Added the `useMutation.throwOnError` and corresponding `queryConfig.throwOnError` option to configure whether the `mutate` function rethrows errors encountered in the mutation function
1414
- Added the `useMutation.useErrorBoundary` and corresponding `queryConfig.useErrorBoundary` option to configure whether mutation errors should be thrown during the render function and propagated to the nearest error boundary. This option will default to the same value as `queryConfig.suspense` if not defined otherwise
15+
- Added a new `reset` function for `useMutation` which will revert the hook's state back to the initial `null` state
1516

1617
## 0.3.27
1718

README.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -947,6 +947,37 @@ mutate(
947947
const { data, isLoading, error } = useQuery(['todo', { id: 5 }], fetchTodoByID)
948948
```
949949
950+
### Resetting Mutation State
951+
952+
It's sometimes the case that you need to clear the `error` or `data` of a mutation request. To do this, you can use the `reset` function to handle this:
953+
954+
```js
955+
const CreateTodo = () => {
956+
const [title, setTitle] = useState('')
957+
const [mutate, { error, mutate }] = useMutation(createTodo)
958+
959+
const onCreateTodo = async e => {
960+
e.preventDefault()
961+
await mutate({ title })
962+
}
963+
964+
return (
965+
<form onSubmit={onCreateTodo}>
966+
{error &&
967+
<h5 onClick={() => reset()}>{error}</h5>
968+
}
969+
<input
970+
type="text"
971+
value={title}
972+
onChange={e => setTitle(e.target.value)}
973+
/>
974+
<br />
975+
<button type="submit">Create Todo</button>
976+
</form>
977+
)
978+
}
979+
```
980+
950981
## Manually or Optimistically Setting Query Data
951982
952983
In rare circumstances, you may want to manually update a query's response before it has been refetched. To do this, you can use the exported `setQueryData` function:
@@ -1385,7 +1416,7 @@ const {
13851416
## `useMutation`
13861417
13871418
```js
1388-
const [mutate, { data, isLoading, error }] = useMutation(mutationFn, {
1419+
const [mutate, { data, isLoading, error, reset }] = useMutation(mutationFn, {
13891420
refetchQueries,
13901421
refetchQueriesOnFailure,
13911422
useErrorBoundary,
@@ -1433,6 +1464,8 @@ const promise = mutate(variables, { updateQuery, waitForRefetchQueries })
14331464
- The last successfully resolved data for the query.
14341465
- `error: null | Error`
14351466
- The error object for the query, if an error was thrown.
1467+
- `reset: Function() => void`
1468+
- Sets the mutation's `data` and `error` fields to `null`.
14361469
- `isLoading: Boolean`
14371470
- Will be `true` if the query is both fetching and does not have any cached data.
14381471
- `promise: Promise`

0 commit comments

Comments
 (0)