I totally agree with you regarding the documentation for apollo-angular. I don't know if this is still relevant to you, but maybe it can help someone else.
If I understand your question correctly, I had as similar issue; a mutate that added an object to a list on another object. After quite a lot of reading I understood that you have to manually update the GraphQL cache to immediately reflect the changes to the list in the UI. In my case, the backend returns the whole list as a response to the mutation, so I could simply update the cache with the new list directly.
I ended up using writeFragment
, as this allows you to write"random-access" data to the GQL cache, which was simpler than writeQuery
.
this.apollo
.mutate({
mutation: YOUR_MUTATION,
update: (cache, result) => {
cache.writeFragment({
id: `[OBJECT_NAME_IN_GQL_CACHE]:[OBJECT_ID_IN_GQL_CACHE]`,
fragment: gql`
fragment [FRAGMENT_NAME] on [OBJECT_NAME_IN_GQL_CACHE] {
[LIST_TO_UPDATE] { [GQL_QUERY] }
}
`,
data: { [LIST_TO_UPDATE]: result.data.[UPDATED_LIST]},
});
},
})
The bottom part of the Apollo Angular doc (about the update
function) helped me to understand how it works. I also used the Apollo Client doc about reading and writing data to the cache.