React Query Tutorial - 21 - Mutations

welcome back everyone over the past 20 videos we had a look at the data fetching aspect of react query now it's time to focus on the data posting aspect that is sending data from your application to any backend if you've worked on web applications for a while you know that posting data like a new to-do item or a new name or submitting a form are all pretty common we add query does cater to those scenarios but it goes the extra mile to make things simpler for you and that is what we will focus on in this video we will learn how to perform a basic post request and in the upcoming videos we will see what features react query provides to make our life easier now similar to the previous videos i have already set up some code beforehand let me walk you through the changes i've done in rq superheroes page where we used to display the list of heroes i have now added two inputs and a button so we are now giving the user the ability to add a new superhero into the list for that in rqsuperheroes.page.js at the top i have imported you state and created two state variables to track the hero name and their alter ego we also have the corresponding setter functions in the jsx we have two inputs whose values are name alter ego and on change we update the respective state variables i've also added a button called add hero on click of which i call a function called handle add hero click at the moment i'm just logging the values to the console so if we were to head back to the browser fill in the flash and barry allen click on add hero in the console we should see the two values now all of this is simple react code which is why i've done it beforehand to save us some time what we now have to do is call an api that accepts hero name and alter ego and save the data into db.json let's learn how the first thing you have to know is that json server apart from supporting get requests also supports post requests so you can make a post request with some data and it will be written to the file we don't have to configure anything with that in mind let's get back to the react query bit in react query unlike queries mutations are what we use to create update or delete data and for this purpose similar to use query the library provides a use mutation hook we could add the code right here in the component but since we have a custom hook created let's head over to that file and add the code now you can see here we defined a custom hook which returns use query we do something similar for use mutation as well at the top import use query and use mutation from react query next we define the custom hub export const use add superhero data and this is an arrow function from within the function we call and return the used mutation hug use mutation unlike use query doesn't necessarily need a key so the first argument is the function which will post data to the back end let's call this function add superhero so similar to the fetcher function we had written for use query we need to define a mutation function const add superhero and this is an arrow function again the function is going to accept the hero details that we pass in from our component within the function we make an axios post request and return the result so return axios dot post the first argument is the url for the api endpoint this remains the same http localhost port 4000 superheroes we also specify hero is the data for this request so that is the second argument if we head to db.json we want the hero object to be added to the superheroes array and this request will accomplish that all right we have now defined the custom use mutation hook the question now is how do we call this hook and post data from the component well for that begin by importing and invoking the custom hook in rqsuperheroes.page.js so use add superhero data and import it at the top we call this hook without any parameters similar to use query use mutation does return a few values which we can destructure for our example we just need one value which is called mutate this is the function we have to call to make the post request so inside handle add hero click const hero is equal to an object with name and alter ego as properties and then we call mutate passing in the hero object of course if you have multiple mutations you can alias the mutate function so mutate colon add hero and within the click handler add hero passing in the hero object and that should do it let's save all the files and test this out in the browser let's fill in the flash and barry allen and click add hero if we now click on fetch heroes we should see the flash being displayed i can click and view the hero details as well our mutation is working as expected if i head to db.json you can see the fourth object now in the superheroes array to summarize import use mutation and call it passing in the mutation function the mutation function automatically receives any argument you pass when you invoke the mutate function in the component in our case it is hero also on a side note i've destructured only mutate function but use mutation also returns ease loading which you can use to show a loading indicator ease error and error to show any possible error and a few other values as a homework i want you to make use of these three values in the component you might have to alias them since we already have the same properties from use query as well give it a try and let me know in the comment section if you were able to get it working thank you for watching and i'll see you in the next video

Channel: Codevolution

Views: 2,290

Keywords: Codevolution, React, React Query, React Query Tutorial, React Query Tutorial for Beginners, React Data Fetching, React Query for Beginners, React Query Tutorial on Mutations, Mutations with React Query

Id: NYCG1o38oEQ

Length: 9min 10sec (550 seconds)

Published: Sun Oct 24 2021