feat: (#157) 댓글 조회, 등록, 수정, 삭제 관련 커스텀 쿼리 구현

frontend/src/hooks/query/comment/useCommentList.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCommentList } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useCommentList = (postId: number) => {
+ const { data, error, isLoading } = useQuery(
+ [QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS],
+ () => getCommentList(postId),
+ {
+ onSuccess: data => {
+ return data;
+ },
+ onError: error => {
+ window.console.log('get comment list error', error);
+ },
+ }
+ );
+
+ return { data, error, isLoading };
+};

frontend/src/hooks/query/comment/useCreateComment.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { CommentRequest } from '@type/comment';
+
+import { createComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useCreateComment = (postId: number) => {
+ const queryClient = useQueryClient();
+ const { mutate, isLoading, isError, error } = useMutation(
+ (newComment: CommentRequest) => createComment(postId, newComment),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS]);
+ },
+ onError: error => {
+ window.console.log('createComment error', error);
+ },
+ }
+ );
+
+ return { mutate, isLoading, isError, error };
+};

frontend/src/hooks/query/comment/useDeleteComment.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useDeleteComment = (postId: number, commentId: number) => {
+ const queryClient = useQueryClient();
+ const { mutate, isLoading, isError, error } = useMutation(
+ () => deleteComment(postId, commentId),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS]);
+ },
+ onError: error => {
+ window.console.log('editComment error', error);
+ },
+ }
+ );
+
+ return { mutate, isLoading, isError, error };
+};

frontend/src/hooks/query/comment/useEditComment.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { CommentRequest } from '@type/comment';
+
+import { editComment } from '@api/comment';
+
+import { QUERY_KEY } from '@constants/queryKey';
+
+export const useEditComment = (postId: number, commentId: number) => {
+ const queryClient = useQueryClient();
+ const { mutate, isLoading, isError, error } = useMutation(
+ (updatedComment: CommentRequest) => editComment(postId, commentId, updatedComment),
+ {
+ onSuccess: () => {
+ queryClient.invalidateQueries([QUERY_KEY.POSTS, postId, QUERY_KEY.COMMENTS, commentId]);
+ },
+ onError: error => {
+ window.console.log('editComment error', error);
+ },
+ }
+ );
+
+ return { mutate, isLoading, isError, error };
+};