refactor(web): move archiveAll cache invalidation into apollo client config

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);

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);
+}

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);