如何为 apollo-angular 中的突变配置缓存？

Question

After a mutation (create, update and delete) I need to update the list, so far the documentation is only for React, but BUT I need help to implement it in Angular 12, and the official documentation for angular is poor and seems almost a copy of the documentation for React.

the idea is that I have a list of things, and I go to another route to create or edit, after saving, I need to return to the updated list

Answer 1

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 aboutreading and writing data to the cache .