Handle GraphQL Request Errors in Vue 3
What do we do with optimistic updates when things don't go the way we planned? Luckily, the Apollo client is smart and corrects the data, but it might not be clear to the user that their mutation didn't go through.
We can have our component emit and error event and that error can be handled by the parent component. In our case, we'll use a v-if to display a message that informs the user their request didn't go through and the updated values were reverted.
Instructor: [0:00] At the moment, when we update a craft in our UI, let's say we change the price from 1,800 to 1,700, we get the change, and then that flash when our server responds and catches up with what we've done. What if, instead of the delay, our server rejected and sent an error?
[0:19] Let's go back and copy this promise. Instead of resolving, we're going to use the second argument, the reject argument. After our two-second delay, so timeout, we're going to reject. This time we'll change the price back to 1,800. When we do that, the price optimistically gets updated to 1,800. After the two seconds, we reject and then we throw an error.
[0:44] Our Apollo Client understands that our optimistic response was wrong, and we've got a more relevant response now, that's going to replace that one. We'd like to communicate with our user that there's been a problem. To do that, let's see what we'd do.
[1:01] Let's update the price of this craft from 1,000 to 1,500. One, two, it's reverting. From our useMutation, we're going to destructure the onError function that's available there. OnError takes an arrow function, or an anonymous function, if you would rather use one of those. Initially, let's just console.log('There is an error').
[1:26] If I update this to 1,500, one, two, revert it back to 1,000, and we can see the error has appeared there, "There is an error." We're in the form here, so we need to emit out of the form to tell our user that there is an error. Let's put an error emit, and let's, here, emit an error.
[1:58] Back in our View, on our updateCraft form, we want to have an atError, and we want to handle error for that. Let's create our handleError function. To handle this, we'll create an error message reference value that we're going to be able to use. When there is an error, we want to be able to set the value of that, errormessage.value. If there is an error, reconverting the values.
[2:29] Where would we have that appear? Maybe above here. Let's have a div here that only appears if there is an error message and just prints out the error message.
[2:39] Let's give that a shot. Update, try to change supplies to 1,500, update. 1500 and one, two...Let's revert this. There was an error reverting values. Let's add some slightly better styling for that. Let's give this a class of ErrorMessage, or a class of errors is probably fine, and then let's add some styling.
[3:08] To the other side, so 1,500. That looks a bit better. Now, our values are reverting, and we're also telling our user that they have reverted as well.