React Query useMutation Hook: Simplify CRUD & Delete Posts Easily

Hello, what's up guys? Today we are going to see useMutationHook in reactquery. So, what is useMutationHook? Let's cover it first. And believe me, you will enjoy it. Because it is very important. Very very important. So guys, as you can see, I have kept complete definitions with syntax. And we will do it practically. But there is a major difference which I want you to never say in your life. And that is the difference between useMutationHook and then your useQueryHook. See, if you remember What happens in CURD operation? We have to create, read, update and then delete. We have already seen the read part. If I tell you, here you can see how to fetch your API data. Check out this particular video. With the help of useQuery I have shown you very easily how you can fetch the data. You can make ArrayState and LoadingState in a snap. But, this is not the only thing in CURD. We have to delete that data or update it or create it or add it. So, in all those things your useQuery doesn't work. Your useMutationHook works there. So, in CURD operation, there are four things. When you have to fetch the data to read it, then useQueryHook works. The other three things update, create and then delete there your useMutation Mutation's work is the same. Mutant. If you have seen X-Men, Wolverine and all they are all mutants. They are humans but they have developed themselves in a new form. Similarly, when we are deleting, we are changing the data. When we are updating, we are changing the data. So, Mutate. So, useQuery only works for one particular HTTP GET method. And then useMutation works for POST, DELETE, UPDATE, PUT, PATCH. I hope it is clear. And then its syntax. It is a very simple syntax. If you see it carefully. That's all. If we are doing useQuery, we need to pass the query key and query function. But here we don't need to pass that query key or mutate key. Here we need useMutationHook. And we have to give a function to useMutationHook. Because if you don't give a function, how will you tell whether you have to delete, update or create. So, that's why we need to pass one mutation function. And then we have this optional configuration option. Which is very important. Why? I will tell you. We have onSuccess, onError, onSettled and then mutation key. So, onSuccess means that if your callback function is successful, then whatever data you pass in it, it will work. OnError, if your function is not successful, or mutation failed, onSettle, a callback function that runs regardless of success or failure. Many times it happens that even if there is no success or failure, still there is something which I have to run. Then here we have onSettle and then mutation key. See, query key was also there. But here, I mean when we were using useQuery, there we need to pass query key and query function no matter what. But here we have to only pass mutation key, I mean mutation function. But the mutation key is kept in optional. Yes, you have to pass it or not. A unique key to identify the mutation in the cache. I hope you got to know this. So, let's start this video without any delay. But before that, guys, how are you finding our 10-stack query and finally useQuery and useMutation? If you got to know the difference, then please like the video. Our next target is 7 lakh subscribers. So, if you haven't subscribed yet, please do it. So, see how it works. It's simple. We have this data pagination. We have already seen many operations. I have to delete the second one. And within a few seconds, boom, it got deleted. Okay. So, we have to see how we can do this. And one more thing, I have already told you about React Router Dome. You can see here. We have all the create operations. You can see the call operations. And even best part, I have made a complete video on how you can use React Router Dome. It's a two-hour video. You will get everything in one video. So, you can check it out. These are just different ways. 10-stack query is just an alternative. How can you do it in a better way? If you like it, then check it and compare it yourself. Which one do you like? So, I will go to my VS Code Editor. This is my code. This is our list. We are getting a paragraph, ID, Title and Body. Now, I can do one thing here. And that is I will put one button where I will write simple. For now, just delete. And if I go here, So, This is ours only. So, we have this delete button. So, guys, let's do one thing. If someone is deleting, let's do the alert. I will have to give the ID. And if I use the template here, it means that I have to do something here. Let's check it out. Can we do this? If I go here, Yeah, simple. So, what should I do? Create a fat error function. Save the controller. Come here, come to delete. High post 2. You can see here, High post 2. If I click here, we are getting a high post 1. So, it's working. For now, keep it as it is. We don't care about it. But, first of all, we need to create that mutation function. There are different ways. You can make it a separate component. Else, let it be. Let's do it here. I will delete the post. Let's do it this way. I have made it in red color. So that we can enjoy it. UseMutation. The moment I wrote this, first of all, we need to import this useMutation from our 10-stack req query no matter what. We need to pass one function. Always make sure whether it's a use query or useMutation, you need to pass an object. In that object, no matter what, at least a mutation function will be there. Remember, mutation function is a property. It should be here. Mutation fn. What did I do wrong? I wrote function. Everything was fine. I wrote mutation function like this. We call it mutation function. In the end, I kept thinking that I have been doing this since then. Later, I came to know that you need to write function. It happens. We need to write property name as it is. Here, you need to call a function. I need to delete any function and call it. Let's go with delete post. Perfect. Obviously, how will we know which function you will delete? We need a unique identity for that. In our case, that is nothing but the id itself. Where will I get that id? I will pass it here. Like this. I am getting this id here. Whenever you create a function and pass an argument, you always know how to do it. There are some things that you can think of. Where will I get this delete post function? Where will I get this id? I will tell you these two things. Wait for delete post. I will tell you how to get this id. This is a function of useMutationHook. I am creating a function called deleteMutation. I am creating a function called deleteMutation. Basically, you can call it a constant variable. I have created it. Now, watch carefully. I will come here. In onClick, where I was doing this earlier, now I will pass this data here. deleteMutation. This is very important. deleteMutation is a simple constant variable. I have passed hooks in it. I am calling that function which will delete it. Now, this is very important. In useMutationHook, you have to call the function. Then, what do we have to do? Wherever you have stored it, that is our deleteMutation. deleteMutation. We have a mutate function. Then, we need to pass the id. This is it. This is very important. That is deleteMutation. In this particular constant variable, we have defined useMutationHook. In useMutationHook, we have called a function. We are passing an argument in it. When you write deleteMutation in this way, with the help of .mutate function, I will tell you. Watch carefully. Don't worry. This mutate function is used to execute the mutation in react query. The process is the same. If you want to create an update, you have to do the same. You have to call the constant variable .mutate. What happens with this? Whenever you call the mutate function, it tells react query to run the mutation function defined inside the useMutationHook. The mutation function inside it tells react query to run it. This is needed because mutation is an action that changes data unlike queries which are used to fetch data and are often auto-executed. I hope you understood. DeleteMutation is just a variable. We have written .mutate in it to call this particular mutate function. This id has been cleared. I have passed it here. That's why I am able to get the id here. Perfect. We are passing the id in this way. The id is here. The only thing left is the deletePost. Copy this. It will appear on the api.js file. It's simple. Export, const, deletePost. Obviously, we are passing that argument. I am accepting it as a parameter. I will return it. We have this api. We have to delete it. Which HTTP method is used to delete? Obviously, it's your delete only. Delete. The most important thing is whenever you play with api, whenever we create an api, we keep in mind that you can delete, update, do pagination functionality. All those things. If you want to delete any post, just copy this same piece of code and paste it here. This is it. You don't have to do anything else. After any post, if you pass the id and if you use the deleteHttp method, that particular post will be deleted from that api. In our case, we are using JSON placeholder which is not my personal api. So, we can't delete it. But, in reality, it will be deleted. Only for our system. When we refresh it again, the data will come. But, yes, this is Funda. You have to understand it. Our work is done. Now, this deletePost control space. We have this deletePost. So, this is how your work is done. To fetch data, we need useQuery. After that, for the remaining 3 operations, you have to use the useMutation hook. In which, you have to give the mutation function no matter what. And, how to give it, you know it. And, how to call that function, you know it. Let's save the controller. I hope, you have understood it. There is some more left. And, your doubt will be cleared. Let me refresh the console. If I click on it, if you go to network, you can see my work is done. You can see that it is deleted. 200 successful. My work is done. Awesome. Now, the problem is that it is not deleted from here. Now, if I refresh it, it will not come back. Because, the moment I refresh it, the data will come back. Actually, we can't delete the data in API. If it was mine, I would have done it. So, now, the moment I click on it, it is deleted from API. But, I have to show it on my system, on my UI, that it is deleted. So, how will I do that? Already, I have told you a method here. How can you delete it from your system with the help of filter method. Obviously, we will use filter in array. And, we will do it here also. We have deleted it very easily. I have shown that video so that you can know that in Axios, it is like this. In React query, it is like this. In React, it is like this. Now, tell me one thing. From where am I getting this data? Don't say that we are fetching server data. Obviously, server API data is there. But, once you fetch it, after that, when you refresh it again, from where do you get the data? Tell me. Obviously, this is the advantage of React query that it doesn't call API again and again. The data on your local cache, from there, it is providing us the data. Okay? This is the data on local cache. That's why, you don't see this loading stage. You can see your data very easily. Now, in some way, I have to delete the data on my local cache. I have a lot of data How will I know whom to delete? Again, we have this unique identifier that is ID number. Now, the first thing is that I have to make sure that I get my local cache data. I want that first. I want my local cache data. For that, what do we do? See, I want to go back. You can see clearly. Let me zoom a little. See this line. What is said? OnSuccess is a callback function that runs when the mutation is successful. See, we have deleted. Now, I have to call this callback function. That is OnSuccess. See, how awesome it is. You are getting to know a new thing. That is OnSuccess. In this callback function, you have to define it like this. Inside this, you have to pass two data. First, a data. You can write anything. It means that you will get a confirmation that yes, it was successfully deleted or not. Then, you have to pass an ID. What does this ID do? It tells you which ID you have deleted. Let me do one thing. Console.log Take data as a confirmation. Like status code, whether it was successful or not. And which ID you wanted to delete. That's all. Let me go here. If I inspect, I come to console and click on delete. See, you got the data. Data, headers, request, status. Data.status If it is triple equal to 200, then you can do more things. I hope you understood. OnSuccess is a callback function. Inside this, you have to pass two data. That is the data. Just a confirmation. Then, we have this ID. I am deleting it. Obviously, when it is successful, then I have to delete the data in my local cache. Whichever user clicked. For that, what we need to do? We have something called useQueryClient. Let me tell you. Let me go here. See, we have one more hook. One more hook. I will pass the value of that constant variable queryClient. Now, what I will do? I am copying queryClient. Over here. queryClient. Here we need to pass one method or function setQueryData. It is a query data, not a queries data. Inside this, you have to pass two things. First, an array. Basically, by saying array, you have to pass a query key. You understand this. With the help of this particular queryClient. setQueryData, you can access local cache data. For a specific query key. It means, which query key data you have to access. Because, in our case, right now, it is only POST. When you work on a big project, you will have multiple query keys. I mean, for which query key you have to access local cache data. I will say, this API call was coming, I have to access the POST query key. I will copy this query key. I will paste it here. This is it. I have to access the local cache data After that, I will run a simple FAT arrow function. Now, you understand, I have got my data. Now, I have to run a simple filter method. That is normal. So, current element. I will go with return. Now, it is normal. If the data is dot, then filter method. It is the same inside. I will do one thing. I will write POST id here. Now, my POST id, if it is not equal to this id, return it. Now, in this particular function, I have said, if it is successful, I have to return all the data which is not match with this id. What does it mean? It means, leave the match data and return all the data. I am showing the return here. What does it mean? The match data will be left there. It means, it is deleted. This is the idea. This is it. I hope, you enjoyed it. Finally, I will click on delete. 3, 2, 1 Boom! It is not deleted. What is the reason? Let's check it out. Is there anything here? Or, is there something here? We are not able to find it. There is nothing here. Everything is equal in the network. Alright, guys. I realized that we made a mistake. Whenever you are getting the current element, What is in the current element? In our current element, we have this much data. We have id, title and body. When I used the map method, I have destructured I have connected the post id directly with the id. In reality, it is not a post id. What I will do is, I am writing post here. Post.id This current element has 4-5 properties. In that also, I have to match the id property with the id. Simple. Now, if I click on 3, 2, 1 Boom, guys. Isn't it awesome? Finally, I hope you got to know how you can do complete code operation with the help of 10-stack query. How can you fetch data? How can you do pagination? Showing the pending stage was a child's play. In this video, I have shown you how you can delete. You might find this sentence a little weird. I know. If we do it in normal XCO or React, I would have to write only this line of code. Because my state variable, which has API data, if I run data.tfilter method, my work would be done. But, here I had to write mutation function. If it is successful, I had to access the cache data. For this specific query, then I did this much. But, once you get to know how to do it, life will be very easy. Whether you want to update or create new data, it is the same thing. You just have to update here. You just have to change here and your work will be done. And obviously here, instead of delete, you will write put or patch. Or you will write post. Simple. There is no other change. Everything else will be the same. You just have to write this mutation. So, this is it for today's video. I hope you liked the video. Guys, how did you like the video? Let me know in the comment section. Also, let me know in the comment section whether you like this code operation in 10-stack query or the video I made in which I told you how to do code operation in 2 hours. Let me know in the comment section. I will also know what you like. If you like the video, please like it. If you don't like it, please dislike it. Let me know in the comment section how did you like the video. Share it with your friends. Our next target is 7 lakh subscribers. We are very close to 7 lakh subscribers. If you haven't subscribed yet, please subscribe. I will see you in tomorrow's video. Till then guys, thank you so much. Take care.