react query 리팩토링 (#687)

* feat: 리뷰 제안 취소, 완료 기능에 optimistic update 적용 * fix: 리스트가 제대로 업데이트 되지 않는 오류 수정 * refactor: NonNullable 타입 제거 --------- Co-authored-by: 상규 <[email protected]>
woowacourse-teams · Nov 14, 2023 · 595a2fd · 595a2fd
1 parent b39d728
commit 595a2fd
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 21 deletions.
diff --git a/frontend/src/hooks/query/useHeaderProfile.ts b/frontend/src/hooks/query/useHeaderProfile.ts
@@ -27,6 +27,6 @@ export const useHeaderProfile = () => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useMyGithubUrl.ts b/frontend/src/hooks/query/useMyGithubUrl.ts
@@ -24,6 +24,6 @@ export const useMyGithubUrl = () => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useMyPostList.ts b/frontend/src/hooks/query/useMyPostList.ts
@@ -4,7 +4,7 @@ import { ToastContext } from '@/contexts/ToastContext';
 import { APIError } from '@/types/error';
 import { GetMyPagePostResponse, MyPagePost } from '@/types/myPage';
 import { ReviewStatus } from '@/types/runnerPost';
-import { useInfiniteQuery, useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { useContext, useEffect } from 'react';
 
 const PAGE_SIZE = 10;
@@ -51,6 +51,6 @@ export const useMyPostList = (isRunner: boolean, reviewStatus?: ReviewStatus) =>
 
   return {
     ...queryResult,
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data ?? [],
   };
 };
diff --git a/frontend/src/hooks/query/useMyRunnerProfile.ts b/frontend/src/hooks/query/useMyRunnerProfile.ts
@@ -21,6 +21,6 @@ export const useMyRunnerProfile = () => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useMySupporterProfile.ts b/frontend/src/hooks/query/useMySupporterProfile.ts
@@ -21,6 +21,6 @@ export const useMySupporterProfile = () => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useNotification.ts b/frontend/src/hooks/query/useNotification.ts
@@ -11,6 +11,6 @@ export const useNotification = () => {
   });
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useOtherRunnerProfile.ts b/frontend/src/hooks/query/useOtherRunnerProfile.ts
@@ -21,6 +21,6 @@ export const useOtherRunnerProfile = (userId: number) => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useOtherSupporterPost.ts b/frontend/src/hooks/query/useOtherSupporterPost.ts
@@ -35,6 +35,6 @@ export const useOtherSupporterPost = (userId: number) => {
 
   return {
     ...queryResult,
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useOtherSupporterPostCount.ts b/frontend/src/hooks/query/useOtherSupporterPostCount.ts
@@ -10,6 +10,6 @@ export const useOtherSupporterPostCount = (supporterId: number) => {
   });
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useOtherSupporterProfile.ts b/frontend/src/hooks/query/useOtherSupporterProfile.ts
@@ -21,6 +21,6 @@ export const useOtherSupporterProfile = (userId: number) => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useProposedSupporterList.ts b/frontend/src/hooks/query/useProposedSupporterList.ts
@@ -21,6 +21,6 @@ export const useProposedSupporterList = (runnerPostId: number) => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useReviewCancelation.ts b/frontend/src/hooks/query/useReviewCancelation.ts
@@ -1,25 +1,50 @@
 import { useContext } from 'react';
 import { ToastContext } from '@/contexts/ToastContext';
-import { useMutation } from '@tanstack/react-query';
+import { InfiniteData, useMutation } from '@tanstack/react-query';
 import { APIError } from '@/types/error';
 import { patchReviewCancelation } from '@/apis/apis';
 import { ERROR_TITLE, TOAST_COMPLETION_MESSAGE } from '@/constants/message';
 import { queryClient } from './queryClient';
+import { GetMyPagePostResponse } from '@/types/myPage';
 
 export const useReviewCancelation = () => {
   const { showErrorToast, showCompletionToast } = useContext(ToastContext);
 
   const queryResult = useMutation<void, APIError, number>({
     mutationFn: (runnerPostId: number) => patchReviewCancelation(runnerPostId),
 
+    onMutate: async (deletedPostId: number) => {
+      await queryClient.cancelQueries({ queryKey: ['mySupporterPost', 'NOT_STARTED'] });
+
+      const previous = queryClient.getQueryData(['mySupporterPost', 'NOT_STARTED']);
+
+      queryClient.setQueryData<InfiniteData<GetMyPagePostResponse>>(['mySupporterPost', 'NOT_STARTED'], (oldData) => {
+        if (!oldData) return undefined;
+
+        const newData = oldData.pages.map((page) => {
+          return { ...page, data: page.data.filter((item) => item.runnerPostId !== deletedPostId) };
+        });
+
+        return {
+          ...oldData,
+          pages: newData,
+        };
+      });
+
+      return { previous };
+    },
+
     onSuccess: () => {
       showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_CANCEL);
-      queryClient.refetchQueries({ queryKey: ['mySupporterPost', 'NOT_STARTED'] });
     },
 
     onError: () => {
       showErrorToast({ title: ERROR_TITLE.REQUEST, description: '리뷰 취소 요청이 실패했어요' });
     },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['mySupporterPost', 'NOT_STARTED'] });
+    },
   });
 
   return queryResult;

diff --git a/frontend/src/hooks/query/useReviewComplete.ts b/frontend/src/hooks/query/useReviewComplete.ts
@@ -1,26 +1,51 @@
 import { useContext } from 'react';
 import { ToastContext } from '@/contexts/ToastContext';
-import { useMutation } from '@tanstack/react-query';
+import { InfiniteData, useMutation } from '@tanstack/react-query';
 import { APIError } from '@/types/error';
 import { patchReviewComplete } from '@/apis/apis';
 import { ERROR_TITLE, TOAST_COMPLETION_MESSAGE } from '@/constants/message';
 import { queryClient } from './queryClient';
+import { GetMyPagePostResponse } from '@/types/myPage';
 
 export const useReviewComplete = () => {
   const { showErrorToast, showCompletionToast } = useContext(ToastContext);
 
   const queryResult = useMutation<void, APIError, number>({
     mutationFn: (runnerPostId: number) => patchReviewComplete(runnerPostId),
 
+    onMutate: async (deletedPostId: number) => {
+      await queryClient.cancelQueries({ queryKey: ['mySupporterPost', 'IN_PROGRESS'] });
+
+      const previous = queryClient.getQueryData(['mySupporterPost', 'IN_PROGRESS']);
+
+      queryClient.setQueryData<InfiniteData<GetMyPagePostResponse>>(['mySupporterPost', 'IN_PROGRESS'], (oldData) => {
+        if (!oldData) return undefined;
+
+        const newData = oldData.pages.map((page) => {
+          return { ...page, data: page.data.filter((item) => item.runnerPostId !== deletedPostId) };
+        });
+
+        return {
+          ...oldData,
+          pages: newData,
+        };
+      });
+
+      return { previous };
+    },
+
     onSuccess: () => {
       showCompletionToast(TOAST_COMPLETION_MESSAGE.REVIEW_COMPLETE);
-      queryClient.refetchQueries({ queryKey: ['mySupporterPost', 'IN_PROGRESS'] });
-      queryClient.refetchQueries({ queryKey: ['mySupporterPost', 'DONE'] });
     },
 
     onError: () => {
       showErrorToast({ title: ERROR_TITLE.REQUEST, description: '리뷰 완료 요청이 실패했어요' });
     },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['mySupporterPost', 'IN_PROGRESS'] });
+      queryClient.invalidateQueries({ queryKey: ['mySupporterPost', 'DONE'] });
+    },
   });
 
   return queryResult;

diff --git a/frontend/src/hooks/query/useRunnerPostDetail.ts b/frontend/src/hooks/query/useRunnerPostDetail.ts
@@ -21,6 +21,6 @@ export const useRunnerPostDetail = (runnerPostId: number, isLogin: boolean) => {
   }, [queryResult.error]);
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useRunnerPostList.ts b/frontend/src/hooks/query/useRunnerPostList.ts
@@ -43,6 +43,6 @@ export const useRunnerPostList = (reviewStatus: ReviewStatus | null, tagName?: s
 
   return {
     ...queryResult,
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data ?? [],
   };
 };
diff --git a/frontend/src/hooks/query/useSearchTag.ts b/frontend/src/hooks/query/useSearchTag.ts
@@ -8,6 +8,6 @@ export const useSearchTag = (keyword: string) => {
   });
 
   return {
-    data: queryResult.data as NonNullable<typeof queryResult.data>,
+    data: queryResult.data,
   };
 };
diff --git a/frontend/src/hooks/query/useSelectionSupporter.ts b/frontend/src/hooks/query/useSelectionSupporter.ts
@@ -22,6 +22,7 @@ export const useSelectionSupporter = () => {
     onSuccess: () => {
       showCompletionToast(TOAST_COMPLETION_MESSAGE.SUPPORTER_SELECT);
       queryClient.invalidateQueries({ queryKey: ['myRunnerPost', 'IN_PROGRESS'] });
+      queryClient.invalidateQueries({ queryKey: ['myRunnerPost', 'NOT_STARTED'] });
       goToRunnerMyPage();
     },
 

diff --git a/frontend/src/pages/RunnerMyPage.tsx b/frontend/src/pages/RunnerMyPage.tsx
@@ -99,7 +99,7 @@ const RunnerMyPage = () => {
                 fontSize={isMobile ? '16px' : '26px'}
               />
             </S.FilterWrapper>
-            <MyPagePostList filteredPostList={myPostList} isRunner={true} />
+            <MyPagePostList filteredPostList={myPostList ?? []} isRunner={true} />
             <S.MoreButtonWrapper>
               {hasNextPage && (
                 <Button