feat: 꿀조합 좋아요는 server state를 동기화하도록 수정

woowacourse-teams · Nov 2, 2023 · 660aab9 · 660aab9
1 parent b859500
commit 660aab9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/frontend/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx b/frontend/src/components/Recipe/RecipeFavoriteButton/RecipeFavoriteButton.tsx
@@ -1,5 +1,4 @@
 import { theme, Button, Text } from '@fun-eat/design-system';
-import { useState } from 'react';
 import styled from 'styled-components';
 
 import { SvgIcon } from '@/components/Common';
@@ -13,43 +12,23 @@ interface RecipeFavoriteProps {
 }
 
 const RecipeFavoriteButton = ({ recipeId, favorite, favoriteCount }: RecipeFavoriteProps) => {
-  const initialFavoriteState = {
-    isFavorite: favorite,
-    currentFavoriteCount: favoriteCount,
-  };
-
-  const [favoriteInfo, setFavoriteInfo] = useState(initialFavoriteState);
-
   const { mutate } = useRecipeFavoriteMutation(Number(recipeId));
-  const { isFavorite, currentFavoriteCount } = favoriteInfo;
 
   const handleToggleFavorite = async () => {
-    setFavoriteInfo((prev) => ({
-      isFavorite: !prev.isFavorite,
-      currentFavoriteCount: isFavorite ? prev.currentFavoriteCount - 1 : prev.currentFavoriteCount + 1,
-    }));
-
-    mutate(
-      { favorite: !isFavorite },
-      {
-        onError: () => {
-          setFavoriteInfo(initialFavoriteState);
-        },
-      }
-    );
+    mutate({ favorite: !favorite });
   };
 
   const [debouncedToggleFavorite] = useTimeout(handleToggleFavorite, 200);
 
   return (
     <FavoriteButton type="button" variant="transparent" onClick={debouncedToggleFavorite}>
       <SvgIcon
-        variant={isFavorite ? 'favoriteFilled' : 'favorite'}
-        color={isFavorite ? 'red' : theme.colors.gray4}
+        variant={favorite ? 'favoriteFilled' : 'favorite'}
+        color={favorite ? 'red' : theme.colors.gray4}
         width={18}
       />
       <Text weight="bold" size="lg">
-        {currentFavoriteCount}
+        {favoriteCount}
       </Text>
     </FavoriteButton>
   );

diff --git a/frontend/src/hooks/queries/recipe/useRecipeFavoriteMutation.ts b/frontend/src/hooks/queries/recipe/useRecipeFavoriteMutation.ts
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { recipeApi } from '@/apis';
 import { useToastActionContext } from '@/hooks/context';
-import type { RecipeFavoriteRequestBody } from '@/types/recipe';
+import type { RecipeFavoriteRequestBody, RecipeDetail } from '@/types/recipe';
 
 const headers = { 'Content-Type': 'application/json' };
 
@@ -18,15 +18,34 @@ const useRecipeFavoriteMutation = (recipeId: number) => {
 
   return useMutation({
     mutationFn: (body: RecipeFavoriteRequestBody) => patchRecipeFavorite(recipeId, body),
-    onError: (error) => {
+    onMutate: async (newFavoriteRequest) => {
+      await queryClient.cancelQueries({ queryKey: queryKey });
+
+      const previousRequest = queryClient.getQueryData<RecipeDetail>(queryKey);
+      console.log(previousRequest);
+
+      if (previousRequest) {
+        queryClient.setQueryData(queryKey, () => ({
+          ...previousRequest,
+          newFavoriteRequest,
+        }));
+      }
+
+      return { previousRequest };
+    },
+    onError: (error, _, context) => {
+      queryClient.setQueryData(queryKey, context?.previousRequest);
+
       if (error instanceof Error) {
         toast.error(error.message);
         return;
       }
 
       toast.error('꿀조합 좋아요를 다시 시도해주세요.');
     },
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKey }),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: queryKey });
+    },
   });
 };