![Client-Side GraphQL in React](https://static.frontendmasters.com/assets/courses/2019-12-03-client-graphql-react/thumb.webp)
Check out a free preview of the full Client-Side GraphQL in React course
The "Optimistic UI Exercise" Lesson is part of the full, Client-Side GraphQL in React course featured in this preview video. Here's what you'd learn in this lesson:
Scott instructs the students to create an optimistic response so that the UI updates immediately.
Transcript from the "Optimistic UI Exercise" Lesson
[00:00:00]
>> Scott Moss: So for this exercise what you're gonna be tasked with doing is creating a Optimistic response. So that our UI is going to update immediately once we create a new path. So to do that, you're gonna have to figure out where you would add the Optimistic response. Do you wanna add it on the useMutation handler, after the update?
[00:00:19]
Or do you want to add it on the Create Pet mutation in location itself next to the variables. The differences when you use Create Pet, you'll get access to the actual variables. Whereas inside the mutation handler you won't, so pick and choose. There's no right, there's wrong, there's just different use cases depending on what you're doing.
[00:00:38]
And just remember the optimistic response object returns exactly or pretty close to every single thing that the mutation itself returns. So in this case, an id, a name, a type, a img. And then it also returns these hidden fields called _-typename, that we talked about, so __typename. So you have to return that __typename for the mutation type, and then also the high level operation which is also a mutation.
[00:01:06]
So both of those type names there, and then we'll come back and we'll finish it.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops