如何為 apollo-angular 中的突變配置緩存？

Question

在發生突變（創建、更新和刪除）之后，我需要更新列表，到目前為止，文檔僅適用於 React，但我需要幫助才能在 Angular 12 中實現它，並且 angular 的官方文檔很差，看起來幾乎是React 文檔的副本。

我的想法是我有一個東西列表，我go到另一個路由創建或編輯，保存后，我需要返回更新列表

Answer 1

關於 apollo-angular 的文檔，我完全同意你的看法。 我不知道這是否仍然與您有關，但也許它可以幫助其他人。

如果我正確理解您的問題，我也有類似的問題； 將 object 添加到另一個 object 的列表中的突變。 經過大量閱讀后，我了解到您必須手動更新 GraphQL 緩存以立即反映 UI 中列表的更改。 在我的例子中，后端返回整個列表作為對突變的響應，所以我可以直接用新列表更新緩存。

我最終使用了writeFragment ，因為這允許您將“隨機訪問”數據寫入 GQL 緩存，這比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]},
                    });
                },
            })

Apollo Angular 文檔的底部（關於update功能）幫助我理解了它是如何工作的。 我還使用了 Apollo Client 文檔關於讀取和寫入數據到緩存。