Fix(#138): invalidateQueries에서 queryOptions 사용 (#144)

boostcampwm-2024 · Nov 25, 2024 · b06ef51 · b06ef51
1 parent eb1ecf2
commit b06ef51
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx b/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@froxy/design/components';
 import { useQueryClient } from '@tanstack/react-query';
 import { LotusRunCodeForm } from './LotusRunCodeForm';
-import { useCodeRunMutation } from '@/feature/history/query';
+import { lotusHistoryQueryOptions, useCodeRunMutation } from '@/feature/history/query';
 import { ModalBox } from '@/shared';
 import { useOverlay } from '@/shared/overlay';
 
@@ -18,8 +18,7 @@ export function CodeRunButton({ lotusId }: { lotusId: string }) {
       {
         onSuccess: () => {
           exit();
-          console.log('생성!');
-          queryClient.invalidateQueries({ queryKey: ['lotus', 'detail', lotusId, 'history'] });
+          queryClient.invalidateQueries(lotusHistoryQueryOptions.list({ id: lotusId }));
         }
       }
     );
@@ -28,7 +27,7 @@ export function CodeRunButton({ lotusId }: { lotusId: string }) {
   const handleOpenModal = () =>
     open(() => (
       <ModalBox onClose={exit}>
-        <LotusRunCodeForm onCancel={() => close()} onSubmit={handleCodeRun} lotusId={lotusId} />
+        <LotusRunCodeForm onCancel={() => exit()} onSubmit={handleCodeRun} lotusId={lotusId} />
       </ModalBox>
     ));
 

diff --git a/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx b/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx
@@ -2,7 +2,7 @@ import { Button, Text } from '@froxy/design/components';
 import { useQueryClient } from '@tanstack/react-query';
 import { IoSettingsSharp } from 'react-icons/io5';
 import { LotusUpdateForm } from './LotusUpdateForm';
-import { useLotusUpdateMutation } from '@/feature/lotus';
+import { lotusQueryOptions, useLotusUpdateMutation } from '@/feature/lotus';
 import { ModalBox } from '@/shared';
 import { useOverlay } from '@/shared/overlay';
 
@@ -18,7 +18,7 @@ export function LotusUpdateButton({ lotusId }: { lotusId: string }) {
       { body, id: lotusId },
       {
         onSuccess: () => {
-          queryClient.invalidateQueries({ queryKey: ['lotus', 'detail', lotusId] });
+          queryClient.invalidateQueries(lotusQueryOptions.detail({ id: lotusId }));
         }
       }
     );