refactor: api 호출 개선 : 지출 내역 과정 (#923)

* refactor: 지출 추가할 때 invalidate queries 남용으로 인해 불필요한 api 호출했던 현상을 개선 * feat: 인원 추가되는 상황에서 post bill이 호출된 후에 all members 무효화 * refactor: post members에 all members invalidate 옮기는 것으로 수정 * style: 불필요한 import 제거 * style: success 오타 수정 * refactor: 지출내역 수정과 상세 수정은 현재 인원을 변동시키지 않으므로 current invalidate 제거 * refactor: 지출내역 삭제할 때는 다시 지출내역 상세를 확인할 수 없으므로 캐시데이터 삭제 * fix: invalidate queries querykey에 event id 추가 * fix: invalidate queries의 query key event id 추가 * style: 주석 오타 수정
woowacourse-teams · Jan 15, 2025 · c38d92f · c38d92f
1 parent cf4427c
commit c38d92f
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 21 deletions.
diff --git a/client/src/hooks/queries/bill/useRequestDeleteBill.ts b/client/src/hooks/queries/bill/useRequestDeleteBill.ts
@@ -14,10 +14,12 @@ const useRequestDeleteBill = () => {
 
   const {mutate, ...rest} = useMutation({
     mutationFn: ({billId}: WithBillId) => requestDeleteBill({eventId, billId}),
-    onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});
+    onSuccess: (_, {billId}) => {
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers, eventId]});
+
+      queryClient.removeQueries({queryKey: [QUERY_KEYS.billDetails, billId, eventId]});
     },
   });
 

diff --git a/client/src/hooks/queries/bill/useRequestPostBill.ts b/client/src/hooks/queries/bill/useRequestPostBill.ts
@@ -13,9 +13,11 @@ const useRequestPostBill = () => {
   const {mutate, ...rest} = useMutation({
     mutationFn: ({title, price, memberIds}: RequestPostBill) => requestPostBill({eventId, title, price, memberIds}),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports, eventId]});
+
+      // admin으로 navigate 되기 전 invalidate 실행 시 api를 불러오는 문제 발생 => remove를 사용하여 캐시 데이터 삭제하는 방식으로 해결
+      queryClient.removeQueries({queryKey: [QUERY_KEYS.currentMembers, eventId]});
     },
   });
 

diff --git a/client/src/hooks/queries/bill/useRequestPutBill.ts b/client/src/hooks/queries/bill/useRequestPutBill.ts
@@ -15,9 +15,8 @@ const useRequestPutBill = () => {
   const {mutate, mutateAsync, ...rest} = useMutation({
     mutationFn: ({billId, title, price}: WithBillId<RequestPutBill>) => requestPutBill({eventId, billId, title, price}),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports, eventId]});
     },
   });
 

diff --git a/client/src/hooks/queries/bill/useRequestPutBillDetails.ts b/client/src/hooks/queries/bill/useRequestPutBillDetails.ts
@@ -16,10 +16,9 @@ const useRequestPutBillDetails = ({billId}: WithBillId) => {
     mutationFn: ({billId, billDetails}: WithBillId<RequestPutBillDetails>) =>
       requestPutBillDetails({eventId, billId, billDetails}),
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});
-      queryClient.removeQueries({queryKey: [QUERY_KEYS.billDetails, billId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports, eventId]});
+      queryClient.removeQueries({queryKey: [QUERY_KEYS.billDetails, billId, eventId]});
     },
     // onMutate: async (newMembers: MemberReportInAction[]) => {
     //   await queryClient.cancelQueries({queryKey: [QUERY_KEYS.memberReportInAction, actionId]});

diff --git a/client/src/hooks/queries/member/useRequestPostMembers.ts b/client/src/hooks/queries/member/useRequestPostMembers.ts
@@ -13,10 +13,11 @@ const useRequestPostMembers = () => {
   const {mutate, mutateAsync, data, ...rest} = useMutation({
     mutationFn: ({members}: RequestPostMembers) => requestPostMembers({eventId, members}),
     onSuccess: responseData => {
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.allMembers]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports]});
-      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.currentMembers]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.allMembers, eventId]});
+
+      // post member는 현재 post bill 이전에만 실행되므로 아래 invalidate는 무의미하지만 나중에 단독으로 이 api가 불릴 때를 위해서 남겨뒀습니다.
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.steps, eventId]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.reports, eventId]});
       return responseData;
     },
   });

diff --git a/client/src/hooks/useEditBillActions.ts b/client/src/hooks/useEditBillActions.ts
@@ -25,7 +25,7 @@ const useEditBillActions = ({bill, billDetails, newBill, newBillDetails}: Props)
   const {deleteBill, isSuccess: isSuccessDeleteBill} = useRequestDeleteBill();
   const {
     putBillDetails,
-    isSuccess: isSusseccPutBillDetails,
+    isSuccess: isSuccessPutBillDetails,
     isPending: isPendingPutBillDetails,
   } = useRequestPutBillDetails({billId: bill.id});
 
@@ -54,10 +54,10 @@ const useEditBillActions = ({bill, billDetails, newBill, newBillDetails}: Props)
   };
 
   useEffect(() => {
-    if (isSuccessDeleteBill || isSusseccPutBillDetails || (isSuccessPutBill && !isBillDetailsChanged)) {
+    if (isSuccessDeleteBill || isSuccessPutBillDetails || (isSuccessPutBill && !isBillDetailsChanged)) {
       navigate(`/event/${eventId}/admin`);
     }
-  }, [isSuccessDeleteBill, isSusseccPutBillDetails, isSuccessPutBill, isBillDetailsChanged]);
+  }, [isSuccessDeleteBill, isSuccessPutBillDetails, isSuccessPutBill, isBillDetailsChanged]);
 
   const isPendingUpdate = () => {
     if (!isBillChanged) {