diff --git a/docs/api/cozy-client/README.md b/docs/api/cozy-client/README.md
index c690fec65..c5c6ec5f6 100644
--- a/docs/api/cozy-client/README.md
+++ b/docs/api/cozy-client/README.md
@@ -6,6 +6,7 @@ cozy-client
* [manifest](modules/manifest.md)
* [models](modules/models.md)
+* [useMutation](modules/useMutation.md)
## Classes
@@ -107,6 +108,40 @@ Use those fetch policies with `` to limit the number of re-fetch.
[packages/cozy-client/src/policies.js:11](https://github.com/cozy/cozy-client/blob/master/packages/cozy-client/src/policies.js#L11)
+***
+
+### useMutation
+
+• `Const` **useMutation**: `Object`
+
+#### Call signature
+
+▸ (`__namedParameters`): `UseMutationReturnValue`
+
+This hook manages the state during the saving of a document
+
+*Parameters*
+
+| Name | Type |
+| :------ | :------ |
+| `__namedParameters` | `Object` |
+
+*Returns*
+
+`UseMutationReturnValue`
+
+*Type declaration*
+
+| Name | Type |
+| :------ | :------ |
+| `propTypes` | { `onError`: `Requireable`<(...`args`: `any`\[]) => `any`> = PropTypes.func; `onSuccess`: `Requireable`<(...`args`: `any`\[]) => `any`> = PropTypes.func } |
+| `propTypes.onError` | `Requireable`<(...`args`: `any`\[]) => `any`> |
+| `propTypes.onSuccess` | `Requireable`<(...`args`: `any`\[]) => `any`> |
+
+*Defined in*
+
+[packages/cozy-client/src/hooks/useMutation.jsx:11](https://github.com/cozy/cozy-client/blob/master/packages/cozy-client/src/hooks/useMutation.jsx#L11)
+
## Functions
### Q
diff --git a/docs/api/cozy-client/modules/useMutation.md b/docs/api/cozy-client/modules/useMutation.md
new file mode 100644
index 000000000..e2bf1b604
--- /dev/null
+++ b/docs/api/cozy-client/modules/useMutation.md
@@ -0,0 +1,16 @@
+[cozy-client](../README.md) / useMutation
+
+# Namespace: useMutation
+
+## Variables
+
+### propTypes
+
+• **propTypes**: `Object`
+
+*Type declaration*
+
+| Name | Type |
+| :------ | :------ |
+| `onError` | `Requireable`<(...`args`: `any`\[]) => `any`> |
+| `onSuccess` | `Requireable`<(...`args`: `any`\[]) => `any`> |
diff --git a/docs/react-integration.md b/docs/react-integration.md
index 013f1dcbd..cc70a487a 100644
--- a/docs/react-integration.md
+++ b/docs/react-integration.md
@@ -10,11 +10,13 @@ Once connected, your components will receive the requesting data and a fetch sta
- [1.a Initialize a CozyClient provider](#1a-initialize-a-cozyclient-provider)
- [1.b Use your own Redux store](#1b-use-your-own-redux-store)
- [2. Usage](#2-usage)
- - [2.a Requesting data with ``](#2a-requesting-data-with-)
+ - [2.a Requesting data with `useQuery`](#2a-requesting-data-with-)
- [2.b Requesting data with the `queryConnect` HOC](#2b-requesting-data-with-the-queryconnect-hoc)
- [2.c Using a fetch policy to decrease network requests](#2c-using-a-fetch-policy-to-decrease-network-requests)
- [2.d Keeping data up to date in real time](#2d-keeping-data-up-to-date-in-real-time)
- [3. Mutating data](#3-mutating-data)
+ - [3.a Mutating data with `useMutation`](#3a-mutating-data-with-usemutation)
+ - [3.b Mutating data with `Query`](#3a-mutating-data-with-query)
- [4. Testing](#4-testing)
@@ -325,15 +327,15 @@ You subscribe to changes for an entire doctype using `RealTimeQueries`, and as l
### 3. Mutating data
-The simplest way is to use the `withClient` high order component. It will inject a `client` in your props with the CozyClient instance you gave to the `` upper.
+The simplest way is to use the hook `useClient` to get the CozyClient instance you gave to the `` upper.
```jsx
-import { withClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
function TodoList(props) {
- const { client } = props
+ const client = useClient()
const createNewTodo = e => client.create(
- 'io.cozy.todos',
+ 'io.cozy.todos',
{ label: e.target.elements['new-todo'], checked: false }
)
return (
@@ -349,10 +351,49 @@ function TodoList(props) {
>
)
}
+```
+
+### 3.a Mutating data with `useMutation`
+
+We also provides a hook to manage `client.save` mutation state called `useMutation`.
+
+```jsx
+import { useMutation } from 'cozy-client'
+
+function TodoLabelInlineEdit({ todo }) {
+ const [label, setLabel] = useState(todo.label)
+ const { mutate, mutationStatus } = useMutation()
+
+ const handleChange = event => {
+ setLabel(event.target.value)
+ }
-const ConnectedTodoList = withClient(TodoList)
+ const handleBlur = () => {
+ mutate({
+ ...todo,
+ label
+ })
+ }
+
+ return (
+