chore: replace updateQueries with update (#1258)

VirtoCommerce · Aug 30, 2024 · 60098e0 · 60098e0
1 parent c4d1314
commit 60098e0
Show file tree

Hide file tree

Showing 18 changed files with 262 additions and 142 deletions.
diff --git a/client-app/core/api/graphql/config/cache.ts b/client-app/core/api/graphql/config/cache.ts
@@ -1,4 +1,5 @@
 import { InMemoryCache } from "@apollo/client/core";
+import { pushMessagesTypePolices } from "../push-messages/typePolices";
 
 export const cache = new InMemoryCache({
   typePolicies: {
@@ -70,11 +71,7 @@ export const cache = new InMemoryCache({
     },
     Query: {
       fields: {
-        pushMessages: {
-          merge(existing, incoming) {
-            return { ...existing, ...incoming };
-          },
-        },
+        ...pushMessagesTypePolices,
       },
     },
   },

diff --git a/client-app/core/api/graphql/consts.ts b/client-app/core/api/graphql/consts.ts
@@ -1,3 +1,4 @@
 export const HTTP_ENDPOINT_URL = "/graphql";
 export const WEBSOCKETS_ENDPOINT_URL = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}${HTTP_ENDPOINT_URL}`;
 export const WEBSOCKETS_ENDPOINT_TIMEOUT = 55 * 1000; // 55 seconds
+export const ROOT_QUERY_CACHE_ID = "ROOT_QUERY";
diff --git a/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts b/client-app/core/api/graphql/push-messages/mutations/clearAllPushMessages/index.ts
@@ -1,32 +1,33 @@
 import { useApolloClient } from "@vue/apollo-composable";
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import { ROOT_QUERY_CACHE_ID } from "@/core/api/graphql/consts";
+import { PUSH_MESSAGES_CACHE_ID } from "@/core/constants/notifications";
 import { ClearAllPushMessagesDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useClearAllPushMessages() {
   const { client } = useApolloClient();
   const result = useMutation(ClearAllPushMessagesDocument, {
     optimisticResponse: {
       clearAllPushMessages: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        if (mutationResult.data?.clearAllPushMessages) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: [],
-              totalCount: 0,
-            },
-            unreadCount: {
-              totalCount: 0,
-            },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
-        }
-      },
+    update(cache, updateResult) {
+      if (!updateResult.data?.clearAllPushMessages) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+      const pushMessagesIds = Object.keys(cacheData[ROOT_QUERY_CACHE_ID] ?? {}).filter(([key]) =>
+        key.startsWith(PUSH_MESSAGES_CACHE_ID),
+      );
+      pushMessagesIds?.forEach((id) => {
+        cache.modify<Record<string, PushMessageConnection[keyof PushMessageConnection]>>({
+          id: id,
+          fields: {
+            items: () => [],
+            totalCount: () => 0,
+          },
+        });
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],

diff --git a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesRead/index.ts
@@ -1,33 +1,45 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkAllPushMessagesReadDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useMarkAllPushMessagesRead() {
   return useMutation(MarkAllPushMessagesReadDocument, {
     optimisticResponse: {
       markAllPushMessagesRead: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        if (mutationResult.data?.markAllPushMessagesRead) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: pushMessagesQueryResult.pushMessages?.items?.map((pushMessage) => ({
-                ...pushMessage,
-                isRead: true,
-              })),
-              totalCount: pushMessagesQueryResult.pushMessages?.items?.length ?? 0,
-            },
-            unreadCount: {
-              totalCount: 0,
+    update(cache, result) {
+      if (!result.data?.markAllPushMessagesRead) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+
+      // update all push messages to be read
+      Object.keys(cacheData).forEach((id) => {
+        if (id.startsWith(PUSH_MESSAGE_CACHE_ID)) {
+          cache.modify({
+            id: id,
+            fields: {
+              isRead: () => true,
             },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
+          });
         }
-      },
+      });
+
+      cache.modify<Record<string, Pick<PushMessageConnection, "totalCount">>>({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: () => ({
+            totalCount: 0,
+          }),
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: () => ({
+            totalCount: 0,
+          }),
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],

diff --git a/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts b/client-app/core/api/graphql/push-messages/mutations/markAllPushMessagesUnread/index.ts
@@ -1,34 +1,61 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import { ROOT_QUERY_CACHE_ID } from "@/core/api/graphql/consts";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  PUSH_MESSAGES_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkAllPushMessagesUnreadDocument, OperationNames } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection } from "../../types";
 
 export function useMarkAllPushMessagesUnread() {
   return useMutation(MarkAllPushMessagesUnreadDocument, {
     optimisticResponse: {
       markAllPushMessagesUnread: true,
     },
-    updateQueries: {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult, { mutationResult, queryVariables }) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        const { withHidden } = queryVariables;
-        if (mutationResult.data?.markAllPushMessagesUnread) {
-          return {
-            ...pushMessagesQueryResult,
-            pushMessages: {
-              items: pushMessagesQueryResult.pushMessages?.items?.map((pushMessage) => ({
-                ...pushMessage,
-                isRead: false,
-              })),
-              totalCount: pushMessagesQueryResult.pushMessages?.items?.length ?? 0,
-            },
-            unreadCount: {
-              totalCount: !withHidden ? pushMessagesQueryResult.pushMessages?.items?.length : 0,
+    update(cache, result) {
+      if (!result.data?.markAllPushMessagesUnread) {
+        return;
+      }
+      const cacheData = cache.extract() as Record<string, unknown>;
+
+      // update all push messages to be unread
+      Object.keys(cacheData).forEach((id) => {
+        if (id.startsWith(PUSH_MESSAGE_CACHE_ID)) {
+          cache.modify({
+            id: id,
+            fields: {
+              isRead: () => false,
             },
-          } satisfies GetPushMessagesQuery;
-        } else {
-          return { ...pushMessagesQueryResult };
+          });
         }
-      },
+      });
+
+      // read current messages count and messages with hidden count from cache
+      const rootQueryEntries = Object.entries((cacheData[ROOT_QUERY_CACHE_ID] ?? {}) as Record<string, unknown>);
+
+      const messages = rootQueryEntries.find(
+        ([key]) =>
+          key.startsWith(PUSH_MESSAGES_CACHE_ID) && key.includes("after") && !key.includes('"withHidden":true'),
+      ) as [string, PushMessageConnection] | undefined;
+      const messagesWithHidden = rootQueryEntries.find(
+        ([key]) => key.startsWith(PUSH_MESSAGES_CACHE_ID) && key.includes("after") && key.includes('"withHidden":true'),
+      ) as [string, PushMessageConnection] | undefined;
+
+      const messagesCount = messages?.[1]?.totalCount ?? 0;
+      const messagesWithHiddenCount = messagesWithHidden?.[1]?.totalCount ?? 0;
+
+      cache.modify<Record<string, Pick<PushMessageConnection, "totalCount">>>({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: () => ({
+            totalCount: messagesCount,
+          }),
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: () => ({
+            totalCount: messagesWithHiddenCount,
+          }),
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],

diff --git a/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts b/client-app/core/api/graphql/push-messages/mutations/markPushMessageRead/index.ts
@@ -1,35 +1,56 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkPushMessageReadDocument, OperationNames, PushMessageFragmentDoc } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection, PushMessageType } from "../../types";
 
-export function useMarkPushMessageRead(optimistic = true) {
+type UnreadCountType = Pick<PushMessageConnection, "totalCount">;
+
+export function useMarkPushMessageRead() {
   return useMutation(MarkPushMessageReadDocument, {
     optimisticResponse: {
       markPushMessageRead: true,
     },
     update(cache, result, { variables }) {
-      if (result.data?.markPushMessageRead) {
-        cache.updateFragment(
-          {
-            id: `PushMessageType:${variables?.command?.messageId}`,
-            fragment: PushMessageFragmentDoc,
-          },
-          (pushMessage) => ({ ...pushMessage!, isRead: true }),
-        );
+      if (!result.data?.markPushMessageRead) {
+        return;
       }
-    },
-    updateQueries: (!optimistic && {}) || {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        return {
-          ...pushMessagesQueryResult,
-          unreadCount: {
-            totalCount: pushMessagesQueryResult.unreadCount?.totalCount
-              ? pushMessagesQueryResult.unreadCount.totalCount - 1
-              : 0,
+
+      let message: PushMessageType | null = null;
+
+      cache.updateFragment(
+        {
+          id: `${PUSH_MESSAGE_CACHE_ID}${variables?.command?.messageId}`,
+          fragment: PushMessageFragmentDoc,
+        },
+        (pushMessage) => {
+          message = pushMessage;
+          return pushMessage ? { ...pushMessage, isRead: true } : null;
+        },
+      );
+
+      cache.modify({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: (value) => {
+            const unreadCount = value as UnreadCountType;
+            if (message?.isHidden) {
+              return unreadCount;
+            }
+            return {
+              totalCount: unreadCount.totalCount ? unreadCount.totalCount - 1 : 0,
+            };
+          },
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: (value) => {
+            const unreadCountWithHidden = value as UnreadCountType;
+            return {
+              totalCount: unreadCountWithHidden.totalCount ? unreadCountWithHidden.totalCount - 1 : 0,
+            };
           },
-        } satisfies GetPushMessagesQuery;
-      },
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],

diff --git a/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts b/client-app/core/api/graphql/push-messages/mutations/markPushMessageUnread/index.ts
@@ -1,35 +1,56 @@
 import { useMutation } from "@/core/api/graphql/composables/useMutation";
+import {
+  PUSH_MESSAGE_CACHE_ID,
+  UNREAD_COUNT_CACHE_ID,
+  UNREAD_COUNT_WITH_HIDDEN_CACHE_ID,
+} from "@/core/constants/notifications";
 import { MarkPushMessageUnreadDocument, OperationNames, PushMessageFragmentDoc } from "../../types";
-import type { GetPushMessagesQuery } from "../../types";
+import type { PushMessageConnection, PushMessageType } from "../../types";
 
-export function useMarkPushMessageUnread(optimistic = true) {
+type UnreadCountType = Pick<PushMessageConnection, "totalCount">;
+
+export function useMarkPushMessageUnread() {
   return useMutation(MarkPushMessageUnreadDocument, {
     optimisticResponse: {
       markPushMessageUnread: true,
     },
     update(cache, result, { variables }) {
-      if (result.data?.markPushMessageUnread) {
-        cache.updateFragment(
-          {
-            id: `PushMessageType:${variables?.command?.messageId}`,
-            fragment: PushMessageFragmentDoc,
-          },
-          (pushMessage) => ({ ...pushMessage!, isRead: false }),
-        );
+      if (!result.data?.markPushMessageUnread) {
+        return;
       }
-    },
-    updateQueries: (!optimistic && {}) || {
-      [OperationNames.Query.GetPushMessages]: (previousQueryResult) => {
-        const pushMessagesQueryResult = previousQueryResult as GetPushMessagesQuery;
-        return {
-          ...pushMessagesQueryResult,
-          unreadCount: {
-            totalCount: pushMessagesQueryResult.unreadCount?.totalCount
-              ? pushMessagesQueryResult.unreadCount.totalCount + 1
-              : 1,
+
+      let message: PushMessageType | null = null;
+
+      cache.updateFragment(
+        {
+          id: `${PUSH_MESSAGE_CACHE_ID}${variables?.command?.messageId}`,
+          fragment: PushMessageFragmentDoc,
+        },
+        (pushMessage) => {
+          message = pushMessage;
+          return pushMessage ? { ...pushMessage, isRead: false } : null;
+        },
+      );
+
+      cache.modify({
+        fields: {
+          [UNREAD_COUNT_CACHE_ID]: (value) => {
+            const unreadCount = value as UnreadCountType;
+            if (message?.isHidden) {
+              return unreadCount;
+            }
+            return {
+              totalCount: (unreadCount.totalCount ?? 0) + 1,
+            };
+          },
+          [UNREAD_COUNT_WITH_HIDDEN_CACHE_ID]: (value) => {
+            const unreadCountWithHidden = value as UnreadCountType;
+            return {
+              totalCount: (unreadCountWithHidden.totalCount ?? 0) + 1,
+            };
           },
-        } satisfies GetPushMessagesQuery;
-      },
+        },
+      });
     },
     // Just in case we did something wrong in cache
     refetchQueries: [OperationNames.Query.GetPushMessages],