merge: [deploy] 잘못된 useQuery를 useMutation으로 변경

re-Duck · Jan 1, 2024 · 66f1e15 · 66f1e15
2 parents 10c1eef + 3b03d9b
commit 66f1e15
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 66 deletions.
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
@@ -2,7 +2,6 @@ name: Run lighthouse CI When Push
 on:
   pull_request:
     branches-ignore:
-      - 'dev'
       - 'main'
 jobs:
   lhci:

diff --git a/client/next.config.js b/client/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['168.188.123.234', 'reduck.site', 'reduckas.site'],
+    domains: ['3.39.78.198', 'reduck.site', 'api.reduckas.site'],
   },
 };
 module.exports = nextConfig;
diff --git a/client/package.json b/client/package.json
@@ -16,6 +16,7 @@
     "@stomp/stompjs": "^7.0.0",
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query-devtools": "^5.17.0",
     "@tiptap/extension-code-block-lowlight": "^2.1.12",
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-image": "^2.1.12",

diff --git a/client/src/components/board/PostContent/index.tsx b/client/src/components/board/PostContent/index.tsx
@@ -20,9 +20,9 @@ interface IProps {
 function PostContent({ postOriginId }: IProps) {
   const user = useSelector((state: IReduxState) => state.auth);
 
-  const { data, refetch } = useQuery({
+  const { data } = useQuery({
     queryKey: [`${postOriginId}`],
-    queryFn: async () => await postManager.getPost({ postOriginId }),
+    queryFn: () => postManager.getPost({ postOriginId }),
     retry: false,
     suspense: true,
   });
@@ -37,23 +37,13 @@ function PostContent({ postOriginId }: IProps) {
       />
       <h3 className="pl-3 text-2xl font-bold">댓글 {comments?.length}</h3>
       <div className="flex flex-col border-gray-100 border-[1px] border-collapse">
-        <CommentUpload
-          user={user}
-          refetch={() => {
-            refetch();
-            setTimeout(
-              () => window.scrollTo(0, document.body.scrollHeight),
-              100
-            );
-          }}
-        />
+        <CommentUpload user={user} />
         {comments?.map((comment: IComment) => (
           <Comment
             key={comment.commentOriginId}
             data={comment}
             IS_AUTHOR={user.userId === comment.commentAuthorId}
             postOriginId={postOriginId}
-            refetch={refetch}
           />
         ))}
       </div>

diff --git a/client/src/components/board/PostDetail/index.tsx b/client/src/components/board/PostDetail/index.tsx
@@ -1,5 +1,5 @@
 //core
-import React from 'react';
+import React, { useEffect } from 'react';
 import Link from 'next/link';
 
 //interface
@@ -45,6 +45,12 @@ export default function PostDetail({ data, IS_AUTHOR }: PostDetail) {
     content: data.postContent,
   });
 
+  useEffect(() => {
+    if (editor) {
+      editor.commands.setContent(data.postContent);
+    }
+  }, [data]);
+
   return (
     <article className="flex flex-col max-w-4xl min-w-full gap-8 px-4 py-6 m-auto bg-white border-2 border-gray-100 sm:p-12">
       <h1 className="text-4xl font-extrabold ">{data.postTitle}</h1>
@@ -63,7 +69,11 @@ export default function PostDetail({ data, IS_AUTHOR }: PostDetail) {
         {IS_AUTHOR && (
           <div className="flex gap-1 font-normal text-gray-500">
             <ModifyCotentButton postOriginId={data.postOriginId} />
-            <DeleteButton id={data.postOriginId} type="post" />
+            <DeleteButton
+              id={data.postOriginId}
+              type="post"
+              postOriginId={data.postOriginId}
+            />
           </div>
         )}
       </div>

diff --git a/client/src/components/common/Post/Comment/index.stories.tsx b/client/src/components/common/Post/Comment/index.stories.tsx
@@ -49,10 +49,6 @@ const meta: Meta<typeof Comment> = {
     postOriginId: {
       description: '댓글이 속한 게시글의 고유 아이디입니다.',
     },
-    refetch: {
-      description:
-        '새로운 댓글 리스트를 불러오는 react-query 함수입니다. 댓글을 수정하거나 삭제한 후에 실행합니다.',
-    },
   },
 };
 

diff --git a/client/src/components/common/Post/Comment/index.tsx b/client/src/components/common/Post/Comment/index.tsx
@@ -16,13 +16,11 @@ interface ICommentProps {
   data: IComment;
   IS_AUTHOR: boolean;
   postOriginId: string;
-  refetch: () => void;
 }
 export default function Comment({
   data,
   IS_AUTHOR,
   postOriginId,
-  refetch,
 }: ICommentProps) {
   const [isModifying, setIsModifying] = useState(false);
   const [comment, setComment] = useState(data.commentContent);
@@ -69,7 +67,7 @@ export default function Comment({
             <DeleteButton
               id={data.commentOriginId}
               type="comment"
-              refetch={refetch}
+              postOriginId={postOriginId}
             />
           </div>
         )}

diff --git a/client/src/components/common/Post/CommentUpload/index.tsx b/client/src/components/common/Post/CommentUpload/index.tsx
@@ -19,10 +19,10 @@ import * as Yup from 'yup';
 
 //types
 import { IUserState } from '@/types/redux/IUserState';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 interface IComentUpload {
   user: IUserState;
-  refetch: () => void;
 }
 
 interface IHnadlerComment {
@@ -35,34 +35,40 @@ const ValidationSchema = Yup.object().shape({
   content: Yup.string().required(errorMessage.blankTitle),
 });
 
-export default function CommentUpload({ user, refetch }: IComentUpload) {
+export default function CommentUpload({ user }: IComentUpload) {
   const router = useRouter();
-  const postOriginId = router.query.id;
+  const postOriginId = router.query.id as string;
 
   const { openModal } = useModal();
   const comentImgSrc = user ? `${BASE_URL}${user.userProfileImgPath}` : '';
+
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation({
+    mutationFn: (content: string) =>
+      commentManager.createComment({ content, postOriginId }),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: [postOriginId] }),
+  });
+
   const handleComment = async ({
     content,
     setSubmitting,
     resetForm,
   }: IHnadlerComment) => {
-    try {
-      if (user === undefined) {
-        openModal({ type: ModalType.ERROR, message: errorMessage.needLogin });
-        setSubmitting(false);
-        return;
-      }
-      await commentManager.createComment({
-        content,
-        postOriginId,
-      });
-      resetForm();
-      setSubmitting(false);
-      refetch();
-    } catch (e) {
+    if (user === undefined) {
+      openModal({ type: ModalType.ERROR, message: errorMessage.needLogin });
       setSubmitting(false);
-      openModal({ type: ModalType.ERROR, message: errorMessage.tryAgain });
+      return;
     }
+    mutate(content, {
+      onSuccess: () => {
+        resetForm();
+        setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 100);
+      },
+      onError: () =>
+        openModal({ type: ModalType.ERROR, message: errorMessage.tryAgain }),
+    });
+    setSubmitting(false);
   };
   return (
     <Formik

diff --git a/client/src/components/common/Post/DeleteButton/index.tsx b/client/src/components/common/Post/DeleteButton/index.tsx
@@ -12,42 +12,61 @@ import {
 //service
 import { postManager } from '@/service/post';
 import { commentManager } from '@/service/comment';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 interface IDeleteButton {
   id: string;
   type: 'comment' | 'post';
-  refetch?: () => void;
+  postOriginId: string;
 }
 
-export default function DeleteButton({ id, type, refetch }: IDeleteButton) {
+export default function DeleteButton({
+  id,
+  type,
+  postOriginId,
+}: IDeleteButton) {
   const { openModal } = useModal();
   const router = useRouter();
+  const queryClient = useQueryClient();
+  const postMutation = useMutation({
+    mutationFn: (id: string) => postManager.deletePost({ postOriginId: id }),
+    onSuccess: () => {
+      router.push('/');
+      openModal({
+        type: ModalType.SUCCESS,
+        message: successMessage.postDeleteSuccess,
+      });
+    },
+    onError: () =>
+      openModal({
+        type: ModalType.ERROR,
+        message: errorMessage.tryAgain,
+      }),
+  });
+  const commentMutation = useMutation({
+    mutationFn: (id: string) =>
+      commentManager.deleteComment({
+        commentOriginId: id,
+      }),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: [postOriginId] }),
+    onError: () =>
+      openModal({
+        type: ModalType.ERROR,
+        message: errorMessage.tryAgain,
+      }),
+  });
+
   const IS_CHECK_MODAL_MESSAGE =
     type === 'post'
       ? warningMessage.confirmDeletePost
       : warningMessage.confirmDeleteComment;
 
   const handdleDelete = async () => {
-    try {
-      if (type === 'post') {
-        await postManager.deletePost({ postOriginId: id });
-
-        router.push('/');
-        openModal({
-          type: ModalType.SUCCESS,
-          message: successMessage.postDeleteSuccess,
-        });
-      } else if (type === 'comment') {
-        await commentManager.deleteComment({
-          commentOriginId: id,
-        });
-        refetch && refetch();
-      }
-    } catch (e) {
-      openModal({
-        type: ModalType.ERROR,
-        message: errorMessage.tryAgain,
-      });
+    if (type === 'post') {
+      postMutation.mutate(id);
+    } else if (type === 'comment') {
+      commentMutation.mutate(id);
     }
   };
   return (

diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -14,9 +14,17 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query';
 
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 function App({ Component, ...rest }: AppProps) {
   const { store, props } = wrapper.useWrappedStore(rest);
-  const [queryClient] = useState(() => new QueryClient());
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
   return (
     <>
       <Head>
@@ -33,6 +41,7 @@ function App({ Component, ...rest }: AppProps) {
               <Component {...props} />
             </AuthComponent>
           </Hydrate>
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </Provider>
     </>

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2872,6 +2872,18 @@
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz"
   integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==
 
+"@tanstack/[email protected]":
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.15.0.tgz#46fe98491be19cbbce8e2f4bb56190f94913ebec"
+  integrity sha512-oz+xBIf+fanmAQ3CZrV4t+1VZiK2nyTcH3zY3G8ukzw+LwX2QGa04ZfF+OCOVF6tPZ2dn1cekMibUb4tevf/aw==
+
+"@tanstack/react-query-devtools@^5.17.0":
+  version "5.17.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.17.0.tgz#32fd9aa23a10f37d5a04a43ea01a9f79075f4fba"
+  integrity sha512-G8sDsK83Zzjr6Nqm4t+8ILi9VWDhg/XjkDD4UYDWqDZHnh/iv4bbQotPLB3PfX7eQtdzgXjGaV8omf1UniyK8w==
+  dependencies:
+    "@tanstack/query-devtools" "5.15.0"
+
 "@tanstack/react-query@^4.29.5":
   version "4.36.1"
   resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz"
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ name: Run lighthouse CI When Push @@
     on:
       pull_request:
         branches-ignore:
-          - 'dev'
           - 'main'
     jobs:
       lhci:
@@ Expand Down @@