Cache Update Solution

[00:00:00]
>> Scott Moss: So just looking at the example that I have pulled up from the docks, just kind of go over it one more time. So use mutation can take an optional second argument which is an object, and on an object you can provide a method called update, which is going to be called, after the mutation is processed and gives you complete control over, the cache in order to update the cache with whatever you want based off of the mutation results.

[00:00:25]
So the update function receives two arguments. One is gonna be the cache that Apollo is using internally. And then you're gonna receive the exact response that the mutation that you're using is gonna return from the server. So nothing more, so this is literally what your server returned. An object with .data and whatever the name of your mutation was if you didn't put an a list or anything like that, that's what it's gonna be.

[00:00:48]
And then the strategy is to find any query that needs to know about the update that you just performed. So in our case we have a query that's displaying a list of pets, and we just created a pet. So that query would need to know about that new pet, so therefore, it can update the cache, which will cause a rerender, and therefore, our pets should show up on the page.

[00:01:11]
So that's what the strategy is, and you can just use the cache to read any query that you want based off the query that you've got a reference to. And then you can write back to that query And set the new data yourself. So data again, this is the same thing the server would send out on a query.

[00:01:28]
Your server would send down object with the data property, followed by the name of the query, followed by the value of that. And that's exactly what you're doing. It's no more and nothing less than that. It's exactly what Apollo does internally, you're just doing it manually. Following so far?

[00:01:43]
So let's just do that. So usurpation we have new pet. First thing were gonna do is we're gonna get the cash here and then we're gonna get the response back from the server. I'm just gonna restructure this. There's a data property on it. And the only thing I'm interested in is this app that's right here.

[00:02:02]
This is the name of my mutations, probably the name of yours too, because we had the same server. We're gonna alias this to something else. Or if it was just called something else, that's what would be here, it'd be something, else something, else like that, but we're not, we're not releasing it.

[00:02:21]
So I'm just going to get the app pet. Like that, the next thing I need to do is figure out what queries I want to update. In this case I only have one query and I would update this one, the all pets query, so I'm gonna read the cache for that.

[00:02:35]
So I'm gonna say, all pets equals cache.readQuery and records gonna take an object here with a query property. And I'm going to pass in all pets query here. So now I got all pets. And then the next thing I want is I want to update this query. So I'm wanna write to that I wanna completely override what is there, but what I want to add.

[00:03:02]
So I can just say cache.writeQuery and I can say, pass in this object here. And the first one is well, let's say query first. And we'll say allpets. So I want to update the allpets query to now have a data property like this. And then, I have to use the exact same query name that's up here, so in this case pets.

[00:03:29]
Insert there. Update pets to now be a completely new array with the allpets that's inside of it, and the new one that I created which is addpet. So I'll just have addpet show up first and then allpets will be here, allpets. You can use concat. You can do whatever you want.

[00:03:55]
There's a lot of ways you can do it. Just don't mutate the original. Everybody following me so far? I'm pretty sure this comes back as,
>> Speaker 2: You have to destructure of allpets.
>> Scott Moss: Yeah, I did have to destructure this you right so I'll just say allpets. not think that already is data.

[00:04:14]
So let me let me just get this data and I'll say data.pets
>> Scott Moss: There we go.
>> Scott Moss: Cool, so now if we run our app, get rid of this thing, refresh, we got five animals here. Make a new one, a dog. Goose, boom, it popped up without me having to refresh.

[00:04:47]
And it went to the beginning when because I added it to the beginning of the array.