Skip to content

Commit f29aa58

Browse files
jiyeeeahjiyeeeah
committedOct 22, 2023
Refactor: queryKey 정리 #65 
1 parent 415ea34 commit f29aa58

11 files changed

+64
-41
lines changed
 

‎constant/query-keys.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
export const queryKeys = {
22
BOARD_LIST: 'boardList',
33
BOARD: 'board',
4+
COMMENT_LIST: 'commentList',
45
ENTERED_CHAT_LIST: 'enteredChatList',
56
RECOMMEND_CHAT_LIST: 'recommendChatlist',
67
TRENDING_CHAT_LIST: 'trendingChatList',
78
CHATROOM_USER_LIST: 'chatRoomUserList',
89
CHAT_HISTORY_LIST: 'chatHistory',
910
SCHEDULE_LIST: 'scheduleList',
1011
SEARCHED_USER_LIST: 'searchedUserList',
12+
MY_BOARD_LIST: 'myBoards',
13+
MY_BOOKMARKED_LIST: 'myBookmarkedBoards',
1114
USER_INFO: 'userInfo',
1215
};

‎hooks/mutations/useDeleteBoard.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { queryKeys } from '@/constant/query-keys';
12
import { deleteBoard } from '@/service/board';
23
import Toast from '@/utils/notification';
34
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -8,7 +9,7 @@ export default function useDeleteComment(boardId: number) {
89
mutationFn: () => deleteBoard(boardId),
910
onSuccess: () => {
1011
Toast.success('게시글이 성공적으로 삭제 되었습니다.');
11-
queryClient.invalidateQueries(['boardList']);
12+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
1213
},
1314
onError: () => {
1415
Toast.error('게시글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

‎hooks/mutations/useDeleteComment.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { queryKeys } from '@/constant/query-keys';
12
import { deleteComment } from '@/service/board';
23
import Toast from '@/utils/notification';
34
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -10,7 +11,7 @@ export default function useDeleteComment() {
1011
deleteComment(boardId, replyId),
1112
onSuccess: () => {
1213
Toast.success('댓글이 성공적으로 삭제 되었습니다.');
13-
queryClient.invalidateQueries(['boardList']);
14+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
1415
},
1516
onError: () => {
1617
Toast.error('댓글을 삭제하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

‎hooks/mutations/useLikeBoard.ts

+22-16
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,45 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
22
import Toast from '@/utils/notification';
33
import { BoardList } from '@/types/types';
44
import { updateBoardLike } from '@/service/board';
5+
import { queryKeys } from '@/constant/query-keys';
56

67
export default function useLikeBoard() {
78
const queryClient = useQueryClient();
89
const { mutate, isLoading } = useMutation({
910
mutationFn: updateBoardLike,
1011
onMutate: async (boardId) => {
11-
await queryClient.cancelQueries({ queryKey: ['boardList'] });
12-
const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
12+
await queryClient.cancelQueries({ queryKey: [queryKeys.BOARD_LIST] });
13+
const previousBoards = queryClient.getQueryData<BoardList>([
14+
queryKeys.BOARD_LIST,
15+
]);
1316

1417
// 낙관적 업데이트
1518
if (previousBoards) {
16-
queryClient.setQueryData<BoardList>(['boardList'], (oldData) => {
17-
if (oldData) {
18-
const updatedData = { ...oldData };
19-
const updatedBoard = updatedData.content?.find(
20-
(board) => board.id === boardId,
21-
);
22-
if (updatedBoard) {
23-
updatedBoard.boardLiked = true;
19+
queryClient.setQueryData<BoardList>(
20+
[queryKeys.BOARD_LIST],
21+
(oldData) => {
22+
if (oldData) {
23+
const updatedData = { ...oldData };
24+
const updatedBoard = updatedData.content?.find(
25+
(board) => board.id === boardId,
26+
);
27+
if (updatedBoard) {
28+
updatedBoard.boardLiked = true;
29+
}
30+
return updatedData;
2431
}
25-
return updatedData;
26-
}
27-
return oldData;
28-
});
32+
return oldData;
33+
},
34+
);
2935
}
3036
return { previousBoards };
3137
},
3238
onSuccess: () => {
33-
queryClient.invalidateQueries(['boardList']);
39+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
3440
},
3541
onError: (_err, _, context) => {
3642
// 캐시를 저장된 값으로 롤백
37-
queryClient.setQueryData(['boardList'], context?.previousBoards);
43+
queryClient.setQueryData([queryKeys.BOARD_LIST], context?.previousBoards);
3844
Toast.error(
3945
'좋아요를 누르는데 실패했습니다. 잠시후 다시 시도해주세요.🥲',
4046
);

‎hooks/mutations/usePostBoard.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { queryKeys } from '@/constant/query-keys';
12
import { postBoard } from '@/service/board';
23
import Toast from '@/utils/notification';
34
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -8,7 +9,7 @@ export default function usePostBoard(postText: string) {
89
mutationFn: () => postBoard({ title: 'title', content: postText }),
910
onSuccess: () => {
1011
Toast.success('게시글이 성공적으로 업로드 되었습니다.');
11-
queryClient.invalidateQueries(['boardList']);
12+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
1213
},
1314
onError: () => {
1415
Toast.error(

‎hooks/mutations/usePostComment.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
22
import Toast from '@/utils/notification';
33
import { PostCommentType } from '@/types/types';
44
import { postComment } from '@/service/board';
5+
import { queryKeys } from '@/constant/query-keys';
56

67
export default function usePostComment() {
78
const queryClient = useQueryClient();
@@ -10,8 +11,8 @@ export default function usePostComment() {
1011
postComment(postCommentData),
1112
onSuccess: () => {
1213
Toast.success('댓글이 성공적으로 업로드 되었습니다.');
13-
queryClient.invalidateQueries(['boardList']);
14-
return queryClient.invalidateQueries(['commentList']);
14+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
15+
return queryClient.invalidateQueries([queryKeys.COMMENT_LIST]);
1516
},
1617
onError: () => {
1718
Toast.error('댓글을 업로드하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

‎hooks/mutations/usePostImageBoard.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { queryKeys } from '@/constant/query-keys';
12
import { postImageBoard } from '@/service/board';
23
import Toast from '@/utils/notification';
34
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -11,7 +12,7 @@ export default function usePostImageBoard(
1112
mutationFn: () => postImageBoard(boardId, { files: postImageUrl }),
1213
onSuccess: () => {
1314
Toast.success('게시글이 성공적으로 업로드 되었습니다.');
14-
queryClient.invalidateQueries(['boardList']);
15+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
1516
},
1617
onError: () => {
1718
Toast.error(

‎hooks/mutations/useUnlikeBoard.ts

+22-16
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,45 @@ import { useQueryClient, useMutation } from '@tanstack/react-query';
22
import Toast from '@/utils/notification';
33
import { BoardList } from '@/types/types';
44
import { deleteBoardLike } from '@/service/board';
5+
import { queryKeys } from '@/constant/query-keys';
56

67
export default function useUnlikeBoard() {
78
const queryClient = useQueryClient();
89
const { mutate, isLoading } = useMutation({
910
mutationFn: deleteBoardLike,
1011
onMutate: async (boardId) => {
11-
await queryClient.cancelQueries({ queryKey: ['boardList'] });
12-
const previousBoards = queryClient.getQueryData<BoardList>(['boardList']);
12+
await queryClient.cancelQueries({ queryKey: [queryKeys.BOARD_LIST] });
13+
const previousBoards = queryClient.getQueryData<BoardList>([
14+
queryKeys.BOARD_LIST,
15+
]);
1316

1417
// 낙관적 업데이트 시작
1518
if (previousBoards) {
16-
queryClient.setQueryData<BoardList>(['boardList'], (oldData) => {
17-
if (oldData) {
18-
const updatedData = { ...oldData };
19-
const updatedBoard = updatedData.content?.find(
20-
(board) => board.id === boardId,
21-
);
22-
if (updatedBoard) {
23-
updatedBoard.boardLiked = false;
19+
queryClient.setQueryData<BoardList>(
20+
[queryKeys.BOARD_LIST],
21+
(oldData) => {
22+
if (oldData) {
23+
const updatedData = { ...oldData };
24+
const updatedBoard = updatedData.content?.find(
25+
(board) => board.id === boardId,
26+
);
27+
if (updatedBoard) {
28+
updatedBoard.boardLiked = false;
29+
}
30+
return updatedData;
2431
}
25-
return updatedData;
26-
}
27-
return oldData;
28-
});
32+
return oldData;
33+
},
34+
);
2935
}
3036
return { previousBoards };
3137
},
3238
onSuccess: () => {
33-
queryClient.invalidateQueries(['boardList']);
39+
queryClient.invalidateQueries([queryKeys.BOARD_LIST]);
3440
},
3541
onError: (_err, _, context) => {
3642
// 캐시를 저장된 값으로 롤백
37-
queryClient.setQueryData(['boardList'], context?.previousBoards);
43+
queryClient.setQueryData([queryKeys.BOARD_LIST], context?.previousBoards);
3844
Toast.error(
3945
'좋아요를 취소하는데 실패했습니다. 잠시후 다시 시도해주세요.🥲',
4046
);

‎hooks/queries/useGetCommentList.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
import { getCommentList } from '@/service/board';
44
import { CommentList } from '@/types/types';
5+
import { queryKeys } from '@/constant/query-keys';
56
import useInfiniteScroll from '../common/useInfiniteScroll';
67

78
export default function useGetCommentList(boardId: number) {
89
const { data, isLoading, Observer, hasNextPage } =
910
useInfiniteScroll<CommentList>({
10-
queryKey: 'commentList',
11+
queryKey: [queryKeys.COMMENT_LIST],
1112
firstPageParam: 0,
1213
queryFn: getCommentList,
1314
getNextPageParamFn: (boardList) =>

‎hooks/queries/useGetMyBoardList.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { getMyBoardList } from '@/service/myPage';
22
import { MyBoardList } from '@/types/types';
3+
import { queryKeys } from '@/constant/query-keys';
34
import useInfiniteScroll from '../common/useInfiniteScroll';
45

56
export default function useGetMyBoardList() {
67
const { data, isLoading, Observer } = useInfiniteScroll<MyBoardList>({
7-
queryKey: 'myBoards',
8+
queryKey: [queryKeys.MY_BOARD_LIST],
89
firstPageParam: 0,
910
queryFn: getMyBoardList,
1011
getNextPageParamFn: (boardlist) =>

‎hooks/queries/useGetMyBookmarkedBoardList.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { getBookmarkedBoardList } from '@/service/myPage';
22
import { BookmarkedBoardList } from '@/types/types';
3+
import { queryKeys } from '@/constant/query-keys';
34
import useInfiniteScroll from '../common/useInfiniteScroll';
45

56
export default function useGetBookmarkedBoardList() {
67
const { data, isLoading, Observer } = useInfiniteScroll<BookmarkedBoardList>({
7-
queryKey: 'myBookmarkedBoards',
8+
queryKey: [queryKeys.MY_BOOKMARKED_LIST],
89
firstPageParam: 0,
910
queryFn: getBookmarkedBoardList,
1011
getNextPageParamFn: (boardlist) =>

0 commit comments

Comments
 (0)
Please sign in to comment.