feat: enhance list mutation handling with optimistic updates and snapshot restoration

Author: joncodeofficial

client/src/features/lists/hooks/useLists.ts

@@ -6,6 +6,20 @@ import {
 } from '@/features/lists/services/listService';
 import { getLocalStorageByRegex } from '@/features/lists/utils/getLocalStorageByRegex';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ListProps } from '@shared/types/list.types';
+
+const LISTS_QUERY_KEY = ['lists'] as const;
+
+type ListsSnapshot = Array<[readonly unknown[], ListProps[] | undefined]>;
+
+const restoreListsSnapshot = (
+  queryClient: ReturnType<typeof useQueryClient>,
+  snapshot: ListsSnapshot
+) => {
+  snapshot.forEach(([queryKey, data]) => {
+    queryClient.setQueryData(queryKey, data);
+  });
+};
 
 export const useLists = () => {
   const authToken = getLocalStorageByRegex(/auth-token/i);
@@ -34,9 +48,29 @@ export const useCreateList = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: createList,
-    onSuccess: () => {
+    onMutate: async ({ body }) => {
+      await queryClient.cancelQueries({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      const previousLists = queryClient.getQueriesData<ListProps[]>({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      queryClient.setQueriesData<ListProps[]>({ queryKey: LISTS_QUERY_KEY }, (old) => {
+        const currentLists = old ?? [];
+        return [...currentLists, body];
+      });
+
+      return { previousLists };
+    },
+    onError: (_error, _variables, context) => {
+      if (!context) return;
+      restoreListsSnapshot(queryClient, context.previousLists);
+    },
+    onSettled: () => {
       queryClient.invalidateQueries({
-        queryKey: ['lists'],
+        queryKey: LISTS_QUERY_KEY,
       });
     },
   });
@@ -46,9 +80,36 @@ export const useUpdateList = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: updateList,
-    onSuccess: () => {
+    onMutate: async ({ listId, body }) => {
+      await queryClient.cancelQueries({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      const previousLists = queryClient.getQueriesData<ListProps[]>({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      queryClient.setQueriesData<ListProps[]>({ queryKey: LISTS_QUERY_KEY }, (old) => {
+        if (!old) return old;
+        return old.map((list) =>
+          list.listId === listId
+            ? {
+                ...list,
+                ...body,
+              }
+            : list
+        );
+      });
+
+      return { previousLists };
+    },
+    onError: (_error, _variables, context) => {
+      if (!context) return;
+      restoreListsSnapshot(queryClient, context.previousLists);
+    },
+    onSettled: () => {
       queryClient.invalidateQueries({
-        queryKey: ['lists'],
+        queryKey: LISTS_QUERY_KEY,
       });
     },
   });
@@ -58,9 +119,29 @@ export const useDeleteList = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: deleteList,
-    onSuccess: () => {
+    onMutate: async ({ listId }) => {
+      await queryClient.cancelQueries({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      const previousLists = queryClient.getQueriesData<ListProps[]>({
+        queryKey: LISTS_QUERY_KEY,
+      });
+
+      queryClient.setQueriesData<ListProps[]>({ queryKey: LISTS_QUERY_KEY }, (old) => {
+        if (!old) return old;
+        return old.filter((list) => list.listId !== listId);
+      });
+
+      return { previousLists };
+    },
+    onError: (_error, _variables, context) => {
+      if (!context) return;
+      restoreListsSnapshot(queryClient, context.previousLists);
+    },
+    onSettled: () => {
       queryClient.invalidateQueries({
-        queryKey: ['lists'],
+        queryKey: LISTS_QUERY_KEY,
       });
     },
   });