Mutations
Tags: javascript, webdev, react, opensource
Published: 2022-10-02 13:26:20

Over the past lessons, we went through the data fetching aspect of React Query now it's time to focus on the data hosting aspect i.e. interacting with the back-end of the application.

Unlike queries, mutations are typically used to create, update and delete data or perform server side-effects. These CRUD operations are pretty basic in any application that interacts with the back-end and React Query not only takes care of all such scenarios effectively but also goes the extra mile to make things simpler.

Here we’ll focus on how to perform a basic POST request and then gradually we’ll go through various features that are provided to perform these operations.

Consider from our previous example, `/companies` endpoint that returns a list of companies from the back-end. Now we will perform a POST request using Axios library, on this endpoint that will take the company’s name and its CEO’s name and will insert it into the list of companies.

For this purpose, React Query exports the `useMutation` hook.

```jsx
import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { useMutation } from "@tanstack/react-query";

import CompaniesList from "./CompaniesList";

const addCompany = (newCompany) => {
  return axios.post("http://localhost:4000/companies", newCompany);
};

const Mutations = () => {
  const [name, setName] = React.useState("");
  const [ceo, setCeo] = React.useState("");
  const { mutate: insertNewCompnay } = useMutation(addCompany);

  const addCompanyData = () => {
    insertNewCompnay({ name, ceo });
  };

  return (
    <div>
      <h1>enter company details</h1>
      <h2>name</h2>
      <input
        type="text"
        onChange={(e) => setName(e.target.value)}
        value={name}
      />
      <h2>ceo</h2>
      <input type="text" onChange={(e) => setCeo(e.target.value)} value={ceo} />
			
			<br />
      <button type="submit" onClick={addCompanyData}>
        save
      </button>
			<br />
      <CompaniesList />
    </div>
  );
};

export default Mutations;
```

The `useMutation` hook takes a functions as its first argument and returns an asynchronous function called `mutate` which in-turn take our request body parameters and performs the insertion to the list of companies.

![insert using useMutation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkz6qbk3qu2gpdf84h3f.gif)

That’s how we perform CRUD operations using React Query, but there’s room for improvement. Notice each time we perform an insert we need to manually trigger a re-fetch for `/companies` by clicking on the button.

This is because the `/companies` query data is out of date but it will not get updated until its stale time is over. To overcome this we can manually inform that this particular query data is stale now and it needs to be updated.

For this scenario, the `useMutation` hook takes in a second argument object where we supply an `onSuccess` callback which will be called once the `addCompany` function is done executing.

```jsx
import { useMutation, useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();
const { mutate: insertNewCompnay } = useMutation(addCompany, {
	onSuccess: () => queryClient.invalidateQueries("companies"),
});
```

Now here we can make use of `invalidateQueries` function which is available via the `queryClient` object which takes in the query key that needs to be updated. When the `invalidateQueries` function is called, the stale time of the query is set to the `EXPIRED` state and the query is re-fetched automatically in the background.

![invalidating queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki5mhktpxx099omniuzg.gif)

---

## Thank you for reading!

And that's a wrap for this series. Now we know why React Query is considered as **The Missing data fetching Library**.
Go ahead and start experimenting.

And as always, feel free to reach out to me! 😊

[💻 Github](https://github.com/nischaldutt) [✨ Twitter](https://twitter.com/nischal_dutt) [💌 Email](mailto:nischaldutt01@gmail.com) [💡Linkedin](https://www.linkedin.com/in/nischal-dutt) 

Happy Conding!