graphql/apollo-angular/docs/data/mutations

[giscus[bot]]

graphql/apollo-angular/docs/data/mutations

Update data with the Apollo.mutate

https://the-guild.dev/graphql/apollo-angular/docs/data/mutations

[SimonCockx]

What's the point of the last section? I don't get what it's trying to say relating to client-side mutations. It seems off-topic.

[PowerKiKi]

It's a very important part of mutations. You should design them in a way that let Apollo know what was mutated on the server, so that Apollo can update it's cache accordingly and keep everything synced.

See #1874 (reply in thread)

[SimonCockx]

When I read this section on optimistic UI, I have one question going through my mind which didn't get a clear answer.

Suppose you're watching a query of Posts, and you get a list of Posts with id's 1, 2 and 3. Then you perform a mutation to modify the post with id 2. Will Apollo Angular automatically update the observable watching the query on all Posts?

When we use mutations in Apollo, the result is typically integrated into the cache automatically based on the id of the result, which in turn updates UI automatically, so we don't explicitly handle the results ourselves.

From this, my answer would be "yes".

However, as the last section mentions, the return type of a mutation could be anything, so how does Apollo Angular know how to update the cache? Does Apollo Angular assume anything about the return type? What if I have a mutation for Posts that always returns { myDummyValue: "unicorns" } instead of Post properties?

[PowerKiKi]

Yes, a watchQuery sole purpose is to watch the cache and emits anytime it changes.

That includes when a mutation on server mutates data. But for Apollo to know that something on server was mutated you should typically return it from your mutation. Apollo has an automatic mechanism to recognize the properties __typename and id to know which object is returned and how to merge it into it's normalized cache.

That means that to benefit from that you must include the id in the result from your mutation (__typename is transparently added by Apollo in all your queries and mutations).

If your mutation does not the return the modified object(s), or if your data structure does not have a unique id, or if you return a list, then you will have to tell Apollo how to handle those. One way to do that is via typePolicies, see https://www.apollographql.com/docs/react/caching/cache-configuration/.

More generally, do read the doc of Apollo React. Most of it also apply to Apollo Angular, and it's more complete and detailed.

[SimonCockx]

@PowerKiKi Okay, makes sense, thanks for clearing that up for me!

[uther-p]

I dislike this style of documentation. I was looking for simple function synopsis and usage documentation, and I don't see that anywhere.