From 854ea80a28f597ed246259064e450118dff433f4 Mon Sep 17 00:00:00 2001
From: jero_kang <81199414+inyeong-kang@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:52:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#563)=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0=EC=97=90=20?=
 =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EB=82=99=EA=B4=80=EC=A0=81=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#633)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../category/useCategoryFavoriteToggle.ts     | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/query/category/useCategoryFavoriteToggle.ts b/frontend/src/hooks/query/category/useCategoryFavoriteToggle.ts
index 13fa830ca..5c238285f 100644
--- a/frontend/src/hooks/query/category/useCategoryFavoriteToggle.ts
+++ b/frontend/src/hooks/query/category/useCategoryFavoriteToggle.ts
@@ -8,16 +8,36 @@ import { QUERY_KEY } from '@constants/queryKey';
 
 export const useCategoryFavoriteToggle = () => {
   const queryClient = useQueryClient();
+  const LOGGED_IN = true;
+  const queryKey = [QUERY_KEY.CATEGORIES, LOGGED_IN];
+
   const { mutate, isLoading, isError, error } = useMutation(
     ({ id, isFavorite }: Omit<Category, 'name'>) =>
       isFavorite ? removeFavoriteCategory(id) : addFavoriteCategory(id),
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries([QUERY_KEY.CATEGORIES]);
+      onMutate: async ({ id }: Omit<Category, 'name'>) => {
+        const oldCategoryList: Category[] | undefined = queryClient.getQueryData(queryKey);
+
+        if (oldCategoryList) {
+          await queryClient.cancelQueries(queryKey);
+          const updatedCategoryList = oldCategoryList.map(item =>
+            item.id === id ? { ...item, isFavorite: !item.isFavorite } : item
+          );
+          queryClient.setQueryData(queryKey, updatedCategoryList);
+
+          return () => queryClient.setQueryData(queryKey, oldCategoryList);
+        }
       },
-      onError: error => {
+      onError: (error, _, rollback) => {
+        if (rollback) {
+          rollback();
+          return;
+        }
         window.console.log('Category favorite toggle error', error);
       },
+      onSettled: () => {
+        queryClient.invalidateQueries(queryKey);
+      },
     }
   );