# Part 74: Enhancing React Applications with React Query: Using useMutation for POST Requests

<figure><img src="https://159896965-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3LclXKUpANLoSt8DPdYV%2Fuploads%2FJK8G3Yjm1qHwjGSqwUcV%2F1675674296261.jpeg?alt=media&#x26;token=989182c4-9098-4bba-8dd9-52aeb4b0f941" alt=""><figcaption><p>[Pages] React Query</p></figcaption></figure>

React Query is a powerful library that simplifies data fetching and state management in React applications. In this blog post, we will explore how to use the `useMutation` hook to handle POST requests effectively. This approach not only cleans up your code but also provides built-in state management for loading and error states.

### From `useQuery` to `useMutation`

Previously, we discussed how to use the `useQuery` hook to fetch and cache data, such as user information in a navigation bar. However, not all HTTP requests are GET requests. In cases where you need to send data, like when logging in, you'll want to use the `useMutation` hook instead.

#### Understanding `useMutation`

The `useMutation` hook in React Query is designed for executing actions that modify or "mutate" data, such as POST, PUT, or DELETE requests. Unlike `useQuery`, which fetches data on component mount, `useMutation` allows you to define a request upfront and execute it later, for example, when a user submits a form.

#### Refactoring the Sign-In Page with `useMutation`

Let's see how we can refactor a sign-in page to use `useMutation`, simplifying the code and improving state management:

```javascript
// File: pages/sign-in.js

import { useRouter } from 'next/router';
import { useMutation } from 'react-query';
import Button from '../components/Button';
import Field from '../components/Field';
import Input from '../components/Input';

function SignInPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const mutation = useMutation(() => fetchJson('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  }));

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const user = await mutation.mutateAsync();
      console.log('signed in:', user);
      router.push('/');
    } catch (err) {
      // mutation.isError will be true
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Field label="Email">
        <Input
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </Field>
      <Field label="Password">
        <Input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </Field>
      {mutation.isError && (
        <p className="text-red-700">
          Invalid credentials
        </p>
      )}
      {mutation.isLoading ? (
        <p>Loading...</p>
      ) : (
        <Button type="submit">Sign In</Button>
      )}
    </form>
  );
}

export default SignInPage;
```

#### Key Changes and Benefits

1. **Simplified State Management**: By using `useMutation`, we replace manual state handling for loading and error states. The `mutation` object provides `isLoading` and `isError` flags that automatically update based on the request's status.
2. **Cleaner Code**: The refactored code is cleaner and more readable, with the `handleSubmit` function focusing solely on form submission logic.
3. **Asynchronous Handling**: The `mutateAsync` method allows us to handle the response data using `await`, making the code concise and easy to understand.

#### Testing the Changes

Once refactored, test your application to ensure that the sign-in functionality works correctly. Try signing in with incorrect and correct credentials to verify that the error and loading states are handled appropriately.

### Conclusion

Using `useMutation` for POST requests in React Query not only simplifies your code but also enhances the user experience by providing built-in handling for loading and error states. This approach is particularly beneficial for actions that modify data, such as user authentication or form submissions. By adopting React Query's hooks, you can streamline your React applications and focus more on building features rather than managing state.
