From ebd671e7b61bf8532bef30e574edaba37e8e1f4d Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Wed, 23 Oct 2024 12:49:02 -0400
Subject: [PATCH] refactor(web): move archiveAll cache invalidation into apollo
 client config

---
 web/components/Notifications/Sidebar.vue | 10 +---------
 web/helpers/apollo-cache.ts              | 23 +++++++++++++++++++++++
 web/helpers/create-apollo-client.ts      | 11 +++++------
 3 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 web/helpers/apollo-cache.ts

diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index dd84dab44..a2cd2f834 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -42,15 +42,7 @@ const notifications = computed(() => {
   return useFragment(NOTIFICATION_FRAGMENT, result.value?.notifications.list);
 });
 
-const { mutate: archiveAll, loading: archivingAll } = useMutation(
-  archiveAllNotifications,
-  {
-    update: (cache) => {
-      cache.evict({ fieldName: "notifications" });
-      cache.gc();
-    },
-  }
-);
+const { mutate: archiveAll, loading: archivingAll } = useMutation(archiveAllNotifications);
 
 watch(error, (newVal) => {
   console.log("[sidebar error]", newVal);
diff --git a/web/helpers/apollo-cache.ts b/web/helpers/apollo-cache.ts
new file mode 100644
index 000000000..4356183c4
--- /dev/null
+++ b/web/helpers/apollo-cache.ts
@@ -0,0 +1,23 @@
+import { InMemoryCache, type InMemoryCacheConfig } from "@apollo/client/core";
+
+const defaultCacheConfig: InMemoryCacheConfig = {
+  typePolicies: {
+    Mutation: {
+      fields: {
+        archiveAll: {
+          merge(_, incoming, { cache }) {
+            cache.evict({ fieldName: "notifications" });
+            // Run garbage collection to clean up evicted references
+            cache.gc();
+            // Return the incoming data to ensure Apollo knows the result of the mutation
+            return incoming;
+          },
+        },
+      },
+    },
+  },
+};
+
+export function createApolloCache(config = defaultCacheConfig) {
+  return new InMemoryCache(config);
+}
diff --git a/web/helpers/create-apollo-client.ts b/web/helpers/create-apollo-client.ts
index b43ec13c0..0aaa6daea 100644
--- a/web/helpers/create-apollo-client.ts
+++ b/web/helpers/create-apollo-client.ts
@@ -1,17 +1,15 @@
 import type {
   split as SplitType,
   ApolloClient as ApolloClientType,
-  InMemoryCache as InMemoryCacheType,
+  NormalizedCacheObject,
 } from "@apollo/client";
 
 import {
   from,
   ApolloClient,
   createHttpLink,
-  InMemoryCache,
   split,
-  // @ts-expect-error - CommonJS doesn't have type definitions
-} from "@apollo/client/core/core.cjs";
+} from "@apollo/client/core";
 
 import { onError } from "@apollo/client/link/error";
 import { RetryLink } from "@apollo/client/link/retry";
@@ -20,6 +18,7 @@ import { getMainDefinition } from "@apollo/client/utilities";
 import { provideApolloClient } from "@vue/apollo-composable";
 import { createClient } from "graphql-ws";
 import { WEBGUI_GRAPHQL } from "./urls";
+import { createApolloCache } from "./apollo-cache";
 
 const httpEndpoint = WEBGUI_GRAPHQL;
 const wsEndpoint = new URL(WEBGUI_GRAPHQL.toString().replace("http", "ws"));
@@ -104,9 +103,9 @@ const splitLinks = (split as typeof SplitType)(
  */
 const additiveLink = from([errorLink, retryLink, splitLinks]);
 
-const client: ApolloClientType<InMemoryCacheType> = new ApolloClient({
+const client: ApolloClientType<NormalizedCacheObject> = new ApolloClient({
   link: additiveLink,
-  cache: new InMemoryCache(),
+  cache: createApolloCache(),
 });
 
 provideApolloClient(client);