Migrate a POST Request in a Redux App to an RTK Query Mutation
Here we use builder.mutation() to define a mutation in our API. What is a mutation? Well it's basically a POST request or anything that would modify something on the server. You'll notice builder.mutation() and builder.query() look very similar except here we are passing the URL in an options object and that's only because we want to pass method and body as well. The query here could potentially also be a string just like in builder.query.
The most interesting thing about mutations is optimistic updates which we'll cover in a later lesson about onQueryStarted.
More information about the options you can pass into builder.mutation can be found here:
https://redux-toolkit.js.org/rtk-query/usage/mutations
Instructor: [0:00] Here, we have a contact form of a simple interface. When the form submits, we call our API. For example, we send an email to test@test.com. It shows, "message sent."
[0:10] Now, if we open up the code for ContactPage.js, you can quickly see how this works. When a form submission occurs, we create a new FormData object here. We convert it to an object and send that into api.makeContact.
[0:24] Let's now open up apiSlice.js, and add a new entry here for makeContact. We're going to create a mutation here. This is going to have a query, which receives the form body.
[0:37] That's going to return not just a string, but an entire object, first with the URL. It's just for contact method, which is going to be post. Then, the body of that will be the body that we pass into the mutation.
[0:51] As you may be aware, URL method and body, these are all options on Fetch. Because we're using the fetchBaseQuery, whatever object whatever object we return here in our query is going to be applied to Fetch.
[1:04] These are normal Fetch arguments. Let's export useMakeContact mutation. Back in contact page, we'll import this from store/apiSlice.
[1:16] At the top of the file, we'll type const makeContact=useMakeContact mutation. Then here, instead of calling api.MakeContact, we will call make contact directly. You'll notice that with queries, we pass in the arguments when we call our hook.
[1:31] With mutations, we get back a trigger function and when we call the trigger function, we'll pass in any arguments there. With this setup, we can continue to make calls through our contact form and they will work great.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!