Refactor: queryKey 정리 #65

puppypawpaw · Oct 22, 2023 · f29aa58 · f29aa58
1 parent 415ea34
commit f29aa58
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 41 deletions.
diff --git a/constant/query-keys.ts b/constant/query-keys.ts
@@ -1,12 +1,15 @@
 export const queryKeys = {
   BOARD_LIST: 'boardList',
   BOARD: 'board',
+  COMMENT_LIST: 'commentList',
   ENTERED_CHAT_LIST: 'enteredChatList',
   RECOMMEND_CHAT_LIST: 'recommendChatlist',
   TRENDING_CHAT_LIST: 'trendingChatList',
   CHATROOM_USER_LIST: 'chatRoomUserList',
   CHAT_HISTORY_LIST: 'chatHistory',
   SCHEDULE_LIST: 'scheduleList',
   SEARCHED_USER_LIST: 'searchedUserList',
+  MY_BOARD_LIST: 'myBoards',
+  MY_BOOKMARKED_LIST: 'myBookmarkedBoards',
   USER_INFO: 'userInfo',
 };
diff --git a/hooks/mutations/useDeleteBoard.ts b/hooks/mutations/useDeleteBoard.ts
@@ -1,3 +1,4 @@
+import { queryKeys } from '@/constant/query-keys';
 import { deleteBoard } from '@/service/board';
 import Toast from '@/utils/notification';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -8,7 +9,7 @@ export default function useDeleteComment(boardId: number) {
     mutationFn: () => deleteBoard(boardId),
     onSuccess: () => {
       Toast.success('게시글이 성공적으로 삭제 되었습니다.');
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error('게시글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

diff --git a/hooks/mutations/useDeleteComment.ts b/hooks/mutations/useDeleteComment.ts
@@ -1,3 +1,4 @@
+import { queryKeys } from '@/constant/query-keys';
 import { deleteComment } from '@/service/board';
 import Toast from '@/utils/notification';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -10,7 +11,7 @@ export default function useDeleteComment() {
       deleteComment(boardId, replyId),
     onSuccess: () => {
       Toast.success('댓글이 성공적으로 삭제 되었습니다.');
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error('댓글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

diff --git a/hooks/mutations/useLikeBoard.ts b/hooks/mutations/useLikeBoard.ts
@@ -2,39 +2,45 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 import Toast from '@/utils/notification';
 import { BoardList } from '@/types/types';
 import { updateBoardLike } from '@/service/board';
+import { queryKeys } from '@/constant/query-keys';
 
 export default function useLikeBoard() {
   const queryClient = useQueryClient();
   const { mutate, isLoading } = useMutation({
     mutationFn: updateBoardLike,
     onMutate: async (boardId) => {
-      await queryClient.cancelQueries({ queryKey: ['boardList'] });
-      const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
+      await queryClient.cancelQueries({ queryKey: [queryKeys.BOARD_LIST] });
+      const previousBoards = queryClient.getQueryData<BoardList>([
+        queryKeys.BOARD_LIST,
+      ]);
 
       // 낙관적 업데이트
       if (previousBoards) {
-        queryClient.setQueryData<BoardList>(['boardList'], (oldData) => {
-          if (oldData) {
-            const updatedData = { ...oldData };
-            const updatedBoard = updatedData.content?.find(
-              (board) => board.id === boardId,
-            );
-            if (updatedBoard) {
-              updatedBoard.boardLiked = true;
+        queryClient.setQueryData<BoardList>(
+          [queryKeys.BOARD_LIST],
+          (oldData) => {
+            if (oldData) {
+              const updatedData = { ...oldData };
+              const updatedBoard = updatedData.content?.find(
+                (board) => board.id === boardId,
+              );
+              if (updatedBoard) {
+                updatedBoard.boardLiked = true;
+              }
+              return updatedData;
             }
-            return updatedData;
-          }
-          return oldData;
-        });
+            return oldData;
+          },
+        );
       }
       return { previousBoards };
     },
     onSuccess: () => {
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: (_err, _, context) => {
       // 캐시를 저장된 값으로 롤백
-      queryClient.setQueryData(['boardList'], context?.previousBoards);
+      queryClient.setQueryData([queryKeys.BOARD_LIST], context?.previousBoards);
       Toast.error(
         '좋아요를 누르는데 실패했습니다. 잠시후 다시 시도해주세요.🥲',
       );

diff --git a/hooks/mutations/usePostBoard.ts b/hooks/mutations/usePostBoard.ts
@@ -1,3 +1,4 @@
+import { queryKeys } from '@/constant/query-keys';
 import { postBoard } from '@/service/board';
 import Toast from '@/utils/notification';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -8,7 +9,7 @@ export default function usePostBoard(postText: string) {
     mutationFn: () => postBoard({ title: 'title', content: postText }),
     onSuccess: () => {
       Toast.success('게시글이 성공적으로 업로드 되었습니다.');
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error(

diff --git a/hooks/mutations/usePostComment.ts b/hooks/mutations/usePostComment.ts
@@ -2,6 +2,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 import Toast from '@/utils/notification';
 import { PostCommentType } from '@/types/types';
 import { postComment } from '@/service/board';
+import { queryKeys } from '@/constant/query-keys';
 
 export default function usePostComment() {
   const queryClient = useQueryClient();
@@ -10,8 +11,8 @@ export default function usePostComment() {
       postComment(postCommentData),
     onSuccess: () => {
       Toast.success('댓글이 성공적으로 업로드 되었습니다.');
-      queryClient.invalidateQueries(['boardList']);
-      return queryClient.invalidateQueries(['commentList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
+      return queryClient.invalidateQueries([queryKeys.COMMENT_LIST]);
     },
     onError: () => {
       Toast.error('댓글을 업로드하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

diff --git a/hooks/mutations/usePostImageBoard.ts b/hooks/mutations/usePostImageBoard.ts
@@ -1,3 +1,4 @@
+import { queryKeys } from '@/constant/query-keys';
 import { postImageBoard } from '@/service/board';
 import Toast from '@/utils/notification';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -11,7 +12,7 @@ export default function usePostImageBoard(
     mutationFn: () => postImageBoard(boardId, { files: postImageUrl }),
     onSuccess: () => {
       Toast.success('게시글이 성공적으로 업로드 되었습니다.');
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: () => {
       Toast.error(

diff --git a/hooks/mutations/useUnlikeBoard.ts b/hooks/mutations/useUnlikeBoard.ts
@@ -2,39 +2,45 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
 import Toast from '@/utils/notification';
 import { BoardList } from '@/types/types';
 import { deleteBoardLike } from '@/service/board';
+import { queryKeys } from '@/constant/query-keys';
 
 export default function useUnlikeBoard() {
   const queryClient = useQueryClient();
   const { mutate, isLoading } = useMutation({
     mutationFn: deleteBoardLike,
     onMutate: async (boardId) => {
-      await queryClient.cancelQueries({ queryKey: ['boardList'] });
-      const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
+      await queryClient.cancelQueries({ queryKey: [queryKeys.BOARD_LIST] });
+      const previousBoards = queryClient.getQueryData<BoardList>([
+        queryKeys.BOARD_LIST,
+      ]);
 
       // 낙관적 업데이트 시작
       if (previousBoards) {
-        queryClient.setQueryData<BoardList>(['boardList'], (oldData) => {
-          if (oldData) {
-            const updatedData = { ...oldData };
-            const updatedBoard = updatedData.content?.find(
-              (board) => board.id === boardId,
-            );
-            if (updatedBoard) {
-              updatedBoard.boardLiked = false;
+        queryClient.setQueryData<BoardList>(
+          [queryKeys.BOARD_LIST],
+          (oldData) => {
+            if (oldData) {
+              const updatedData = { ...oldData };
+              const updatedBoard = updatedData.content?.find(
+                (board) => board.id === boardId,
+              );
+              if (updatedBoard) {
+                updatedBoard.boardLiked = false;
+              }
+              return updatedData;
             }
-            return updatedData;
-          }
-          return oldData;
-        });
+            return oldData;
+          },
+        );
       }
       return { previousBoards };
     },
     onSuccess: () => {
-      queryClient.invalidateQueries(['boardList']);
+      queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
     },
     onError: (_err, _, context) => {
       // 캐시를 저장된 값으로 롤백
-      queryClient.setQueryData(['boardList'], context?.previousBoards);
+      queryClient.setQueryData([queryKeys.BOARD_LIST], context?.previousBoards);
       Toast.error(
         '좋아요를 취소하는데 실패했습니다. 잠시후 다시 시도해주세요.🥲',
       );

diff --git a/hooks/queries/useGetCommentList.tsx b/hooks/queries/useGetCommentList.tsx
@@ -2,12 +2,13 @@
 
 import { getCommentList } from '@/service/board';
 import { CommentList } from '@/types/types';
+import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetCommentList(boardId: number) {
   const { data, isLoading, Observer, hasNextPage } =
     useInfiniteScroll<CommentList>({
-      queryKey: 'commentList',
+      queryKey: [queryKeys.COMMENT_LIST],
       firstPageParam: 0,
       queryFn: getCommentList,
       getNextPageParamFn: (boardList) =>

diff --git a/hooks/queries/useGetMyBoardList.tsx b/hooks/queries/useGetMyBoardList.tsx
@@ -1,10 +1,11 @@
 import { getMyBoardList } from '@/service/myPage';
 import { MyBoardList } from '@/types/types';
+import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetMyBoardList() {
   const { data, isLoading, Observer } = useInfiniteScroll<MyBoardList>({
-    queryKey: 'myBoards',
+    queryKey: [queryKeys.MY_BOARD_LIST],
     firstPageParam: 0,
     queryFn: getMyBoardList,
     getNextPageParamFn: (boardlist) =>

diff --git a/hooks/queries/useGetMyBookmarkedBoardList.tsx b/hooks/queries/useGetMyBookmarkedBoardList.tsx
@@ -1,10 +1,11 @@
 import { getBookmarkedBoardList } from '@/service/myPage';
 import { BookmarkedBoardList } from '@/types/types';
+import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetBookmarkedBoardList() {
   const { data, isLoading, Observer } = useInfiniteScroll<BookmarkedBoardList>({
-    queryKey: 'myBookmarkedBoards',
+    queryKey: [queryKeys.MY_BOOKMARKED_LIST],
     firstPageParam: 0,
     queryFn: getBookmarkedBoardList,
     getNextPageParamFn: (boardlist) =>