feat: invalidateQueries를 사용해서 경매 댓글 post시 자동으로 get 요청

CarrotAuction · Feb 20, 2024 · ad5aab2 · ad5aab2
1 parent bf0f4e8
commit ad5aab2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/src/components/auctionDetailPage/Modal/index.tsx b/src/components/auctionDetailPage/Modal/index.tsx
@@ -18,7 +18,7 @@ const Modal = ({ handleModal, creatorId, boardId }: Props) => {
   const [price, setPrice, resetPrice] = useInput();
   const [openChatUrl, setOpenChatUrl, resetOpenChatUrl] = useInput();
 
-  const { mutate } = usePostComment(refetch);
+  const { mutate } = usePostComment();
 
   const handleBidding = async () => {
     if (price === '' || openChatUrl === '') {

diff --git a/src/components/auctionDetailPage/ProductInfo/index.tsx b/src/components/auctionDetailPage/ProductInfo/index.tsx
@@ -92,15 +92,15 @@ const ProductInfo = ({ productInfo }: Props) => {
             ? '판매 종료'
             : '경매 참여하기'}
         </button>
-        {/* {isOpen && (
+        {isOpen && (
           <ModalPortal>
             <Modal
               handleModal={handleModal}
               creatorId={loginedId}
               boardId={board.id}
             />
           </ModalPortal>
-        )} */}
+        )}
       </article>
     </section>
   );

diff --git a/src/remote/query/auctionDetail/index.ts b/src/remote/query/auctionDetail/index.ts
@@ -25,19 +25,16 @@ export const useGetDetailInfo = (boardId: string) => {
   });
 };
 
-export const usePostComment = (
-  refetch: (
-    options?: RefetchOptions,
-  ) => Promise<QueryObserverResult<ProductInfoType>>,
-) =>
-  useMutation({
+export const usePostComment = (boardId: number) => {
+  const queryClient = useQueryClient();
+  return useMutation({
     mutationFn: (data: Comment) => PostComment(data),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['BoardDetail'] });
       Swal.fire({
         icon: 'success',
         title: '경매 참여 완료!',
       });
-      refetch();
     },
     onError: (error) => {
       if (error instanceof AxiosError) {
@@ -50,6 +47,7 @@ export const usePostComment = (
       }
     },
   });
+};
 
 export const usePostLike = ({ boardId }: any) => {
   const queryClient = useQueryClient();