How to use 'useMutation' in React Query
Tags: javascript, webdev, react, nextjs
Published: 2022-04-19 18:25:43

I'm pretty sure you've read my previous post about [how to get started with react-query](https://dev.to/code_with_aravind/getting-started-with-react-query-9lp) where I discuss how to use 'useQuery' hook on fetching the data.

So 'useQuery' is only used for fetching the data but 'useMutation' is for post/put request to the backend.

Lets say I have a function for post request.

##### In userApi.js

```javascript
import axios from 'axios'


const api = axios.create({
    baseURL : "https://gorest.co.in/public/v2",
    headers : {'Authorization' : `Bearer ${apiToken}`}
}


export const createUser = (newUser) => api.post("/users",newUser).then(res => res.data);
```

This _createUser_ function takes an user object and it will be posted in the _gorest_ api. For the token you just need to signup in the gorest website.

Let's create a form page which takes name,email,gender and status which are the properties in the gorest api. I just handled the formData using useState here.

##### UserForm.js

```javascript
import React, {  useState } from 'react'


function UserForm() {
   const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>

           

            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female
           
            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active
           
            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />
          
        </form>
    </div>
  )
}

export default UserForm
```

On submitting this form I've just consoled the userData object. You can see the output in the following screenshot.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a3kdzmx4lawajufewrp.png)


So for posting the data you need to trigger the function right. But how do we do that using useMutation.Let's see.

```javascript
import { useMutation } from 'react-query'


const {mutate} = useMutation(createUser);

```

This _mutate_ is a function which should be triggered whenever you need and the data/payload you want to send should send as a parameter to this mutate function.

so my handleSubmit function would look like


```javascript
const handleSubmit = (e) => {
    e.preventDefault();
    mutate(userData);

```

As we handled in useQuery you can have isLoading for posting the data. With all the modifications, I just showed the response in my UI. lets see the code.

```javascript
import React, {  useState } from 'react'
import { useMutation } from 'react-query'
import {createUser} from './userApi'

function UserForm() {
    const {mutate, isLoading} = useMutation(createUser, {
        onSuccess : (data) => {
            console.log(data) //This is the response you get back
            setResponse(data)
        }
    })
    const [response,setResponse] = useState({})
    const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        mutate(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>

           

            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female
           
            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active
           
            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />
          
        </form>
        {isLoading && <div>Posting the data...</div>}
        {Object.keys(response).length > 0 && (<div>
            <h4>Response</h4>
            <p>{response.name}</p>
            <p>{response.email}</p>
        </div>)}
    </div>
  )
}

export default UserForm
```
The _onSuccess_ method will be triggered once your post request is success and the data is the response returned after the post request. 

The output I've generated in the following screenshot.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebk2ehc8nuegx4xt03z3.png)

There would be some additional steps that need to be taken care of whenever you updating some values(making put request) and you want that change to be reflected back.But I want each of my post to be the essential so I'll just leave it to the next topic.Hope this is useful.