Optimistic UI Solution

[00:00:00]
>> Scott Moss: And now, we're gonna go over, hopefully, you had enough time to create those optimistic responses. If not, we're gonna do it right now, so I decided to add the optimistic response to the createPet. So I have access to the input arguments, which is gonna allow me to get as close as possible to the result of the server, which is gonna minimize the interaction of the server data coming in and replacing the hard coded data that I'm about to write, because a lot of that data's gonna be visually displayed.

[00:00:30]
So the closer I can get to it, the less that effect is gonna be. So I'm gonna choose to add my to the createPet out of here. So I'm going to say optimistic response, which is an object. I'm gonna handle the type name for the mutation. And then, I'm going to get the name of the mutation, which is called addPet.

[00:00:55]
I'm going to add that there. And then, the type for addPet, if you didn't know what that was, you can go back to your documents on Apollo Docs.
>> Scott Moss: And you can look at the schema, you can look at mutation, you can look at addPet. And then, you'll see, if I can scroll over some more here, it returns addPet type.

[00:01:17]
So that's exactly what I wanna put for the type name for the addPet mutation, it's a pet type. So I'll say typename, pet. And then, I just wanna get all the fields from my mutation. So I'm just gonna copy all these fields here, make sure I got the exact ones, and I'm gonna add them.

[00:01:34]
And here, it's not about adding the type of the fields, it's about adding values, values you suspect the server to return. So an ID, there's no way we know what that ID is gonna be from the server. So we'll just make one up. We're gonna do something generic.

[00:01:48]
You can hard code something, doesn't matter. I'm just gonna do like rafta floor, flute rafta floor to a map dot random times 1000. Plus a stream, maybe, maybe, a bigger number. So he's got a random number there, you can do date.now, whatever you wanna do, the name, we actually get that from the input.

[00:02:12]
So we can just use input.name for that. And that's really good, because the names do show up on that pet card, so that'd be really good to not see that switch out. The type, same thing, input.type, and an image, right now, our servers responsible for creating the images, so we don't really know which one's gonna be, so I'm just gonna add a placeholder, I got one here, I'm just gonna add one from placeholder.com with like the same with, you can put whatever you want, there's so many different strategies for progressively loading in images, there's literally not one way.

[00:02:43]
It depends on your UI. I was telling people you can have, depending on the type you can load in a SVG that you have already built into the app for a dog, or an SVG for a cat. You can have a blurry image for a dog. There's so many ways that you can load this in progressively, but there is no right or wrong way.

[00:03:04]
Just know that, because the images are different that's the one transition that you probably won't be able to control. So that's why there's a lot of creativity around like how to solve this problem with images. But there's other data will be very close, and we're not showing the ID on the pet card.

[00:03:18]
So even though the ID is gonna be different when it gets replaced, no one's gonna notice that it's happening in the background. The input in the name do show up in the car, but they're exact ones that we sent up. So unless the server modifies these to be something different than what we sent up, there and look exactly the same as well, and the image is the only one that's gonna be different.

[00:03:35]
So if we didn't have any images, you wouldn't even notice the change at all after the mutation happened. You wouldn't even see it, it would just be there immediately, and then, that's it. Nothing else would happen. I am going to save that. Make sure we got our loading balloon off of the mutation, save that.

[00:03:54]
And then, we’ll go back and try it out. So got a dog here, want to make a new cat, and call it Carol. Carol the cat. And it showed up immediately, we saw the placeholder image, and then, boom, the cat popped in. And the image was the only thing that changed.

[00:04:12]
The word Carol and Cat didn't. It stayed, because it was exactly the same. And that's the optimistic update, which, again, is an alternative to just showing a loaded screen every time someone updates something. Any questions on that? Yes.
>> Speaker 2: If you find optimistic response in those places, what's so other?

[00:04:33]
>> Scott Moss: If you define them in both places, then I believe the order's gonna be the one that you pass in on the invocation of the function. So if I took this one here, command button. So I took this optimistic response, and I go up to here, and I add it here.

[00:04:52]
And let's say, I change this to, so we know the difference. I'll give this a different name. We'll say from mutation. And we'll give this, we'll always call this, well, yeah, we'll call this a cat always. So we'll save that, go back here, make sure that's good. Cat,

[00:05:20]
>> Scott Moss: Lilly, so you can see it took the one from this one, because it had the name that I typed in, this one override it. Now, if I got rid of this one, we should have the hardcoded one, which is always a cat and always have that name.

[00:05:42]
From mutations, there we go.
>> Scott Moss: Any other questions?
>> Speaker 2: Yeah, what happens on error?
>> Scott Moss: What happens on error? Good question, so let's see. So if I add, let's make a error. Let's put a j there, that's gonna cause an error, cuz that's not a real field. So we'll put a j, they have an optimistic response.

[00:06:08]
Well, and a new dog, call it, yellow pet. Your app just broken this case, and that's because, we have an error handler here that breaks the app. So it's just broken. That's why you see that problem. But I guess what you're asking is like what happens to the cash?

[00:06:31]
If the air is out? Well, if nothing ever comes back from the optimistic response, the caches is gonna keep that in there. So yeah. You'd have to get rid of it. [LAUGH] Basically, you'll have to get rid of that thing yourself. So account for those errors. Errors are always use cases.