React Query mutating data

So far, we have looked at how we can load data with React Query and even use an infinite loader.

But often, we also have the option to manipulate data. This could be either creating, updating, or deleting data.

React Query has a super cool hook for this type of mutation called useMutation. Using this hook, you can leverage not having to call the initial query to update.

React Query mutation example permalink

Let’s sketch an example so it’s easier to explain.

We have this list of Pokemon, but we discovered a new one exists. We use a form to update this Pokemon, which makes a post request to our API and often will return the format we need.

Since the API would already return the data, we need there is no need for us to update the whole query as we know what we already want to add.

Instead, we can leverage this hook to tell us to update the cached values once it’s succeeded manually.

Let’s see how this works.

Using the useMutation hook in React Query permalink

First, let’s add a button to demo this out, we usually have a complete form, but you’ll get the point.

The button acts as our “form” submit and passes the name of this new Pokemon.

<button onClick={() => addNewPokemon('JavaMon')}>Add a random Pokemon</button>

Now it’s time to introduce you to the useMutation hook. Let’s start by importing it.

import { useMutation } from 'react-query';

We can then use it like this:

const { mutate } = useMutation(mutation, {
  // options
});

The mutate extraction is how we can invoke the actual mutation to happen. Since we called our function addNewPokemon, we can destructure it to a different name:

const { mutate: addNewPokemon } = useMutation();

Then for our mutation, we would generally have a call to your API, but for the sake of this tutorial, we’ll mimic that effect and return what our API would return.

const { mutate: addNewPokemon } = useMutation(
  (newPokemon) => {
    // return axios.post('API', newPokemon);
    return { name: newPokemon };
  },
  {
    // options
  }
);

Now for the fun part, which is the options, we want to use onSuccess. This option is called once the mutation is successfully finished.

Once that happens, we want to use the setQueryData function to change the existing data for a specific key.

The setQueryData function has a parameter that can return the old data, and we then merge the old data with this new data.

const { mutate: addNewPokemon } = useMutation(
  (newPokemon) => {
    // return axios.post('API', newPokemon);
    return { name: newPokemon };
  },
  {
    onSuccess: async (newPokemon) => {
      queryClient.setQueryData('pokemon', (old) => [...old, newPokemon]);
    },
  }
);

And that’s it! When we click the button, our Pokemon will be added to the list without refetch the whole query.

Note: On every load, the Pokemon will disappear since we didn’t add it to our database.

Feel free to have a play with this Code Sandbox.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter