query invalidate when edit or delete the post

PoolC · Jul 3, 2024 · 0d56ecb · 0d56ecb
1 parent 6ba153c
commit 0d56ecb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/apps/web-client/src/components/board/BoardJobWriteSection.tsx b/apps/web-client/src/components/board/BoardJobWriteSection.tsx
@@ -166,10 +166,11 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            history.push(`/${MENU.BOARD}/${postId}`);
-            queryClient.invalidateQueries({
-              queryKey: queryKey.post.post(postId),
-            });
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.post(postId),
+              })
+              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
           },
         },
       );
@@ -194,10 +195,11 @@ export default function BoardJobWriteSection({ postId }: { postId: number }) {
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`);
-            queryClient.invalidateQueries({
-              queryKey: queryKey.post.all('JOB', 0),
-            });
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.all('JOB', 0),
+              })
+              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType: 'JOB' })}`));
           },
         },
       );

diff --git a/apps/web-client/src/components/board/BoardNormalWriteSection.tsx b/apps/web-client/src/components/board/BoardNormalWriteSection.tsx
@@ -120,10 +120,11 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 수정되었습니다.');
-            history.push(`/${MENU.BOARD}/${postId}`);
-            queryClient.invalidateQueries({
-              queryKey: queryKey.post.post(postId),
-            });
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.post(postId),
+              })
+              .then(() => history.push(`/${MENU.BOARD}/${postId}`));
           },
         },
       );
@@ -144,10 +145,11 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
         {
           onSuccess() {
             message.success('글이 작성되었습니다.');
-            history.push(`/${MENU.BOARD}?${stringify({ boardType })}`);
-            queryClient.invalidateQueries({
-              queryKey: queryKey.post.all(boardType, 0),
-            });
+            queryClient
+              .invalidateQueries({
+                queryKey: queryKey.post.all(boardType, 0),
+              })
+              .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType })}`));
           },
         },
       );

diff --git a/apps/web-client/src/pages/board/BoardDetailPage.tsx b/apps/web-client/src/pages/board/BoardDetailPage.tsx
@@ -7,6 +7,7 @@ import { useForm, zodResolver } from '@mantine/form';
 import { z } from 'zod';
 import { Viewer } from '@toast-ui/react-editor';
 import { FolderOpenTwoTone } from '@ant-design/icons';
+import { useQueryClient } from '@tanstack/react-query';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
 import { getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
@@ -19,7 +20,6 @@ import { noop } from '~/lib/utils/noop';
 import { getProfileImageUrl } from '~/lib/utils/getProfileImageUrl';
 import { convertPositionToText } from '~/lib/utils/positionUtil';
 import { useAppSelector } from '~/hooks/useAppSelector';
-import { queryClient } from '~/lib/utils/queryClient';
 
 const useStyles = createStyles(({ css }) => ({
   wrapper: css`
@@ -126,6 +126,7 @@ export default function BoardDetailPage() {
   const { styles, cx } = useStyles();
   const message = useMessage();
   const history = useHistory();
+  const queryClient = useQueryClient();
 
   const params = useParams<{ id: string }>();
   const postId = Number(params.id);
@@ -240,7 +241,13 @@ export default function BoardDetailPage() {
       {
         onSuccess() {
           message.success('삭제되었습니다.');
-          history.go(-1);
+          // TODO: assert 이용해서 수정
+          const boardType = post!.boardType!;
+          queryClient
+            .invalidateQueries({
+              queryKey: queryKey.post.all(boardType, 0),
+            })
+            .then(() => history.push(`/${MENU.BOARD}?${stringify({ boardType })}`));
         },
       },
     );