refactor: TanStack Query V5 업데이트 (#239)

* chore: tanstack-query 버전 업데이트

* refactor: useAuthCheckQuery -> authCheckOption 변경

* refactor: useGetPostsInfoQuery, usePostDetailQuery 옵션 분리

* refactor: 모든 쿼리 훅을 options로 교체

* refactor: isLoading을 isPending으로 변경

* refactor: mutations에 queryKey 객체 방식으로 전달하도록 수정 (v5 대응)

* style: useSuspenseQuery 두 번 임포트하던 부분 제거

packages/web/package.json

@@ -19,8 +19,8 @@
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
     "@hookform/resolvers": "^3.3.1",
-    "@tanstack/react-query": "^4.35.3",
-    "@tanstack/react-query-devtools": "^4.35.3",
+    "@tanstack/react-query": "^5.17.15",
+    "@tanstack/react-query-devtools": "^5.17.18",
     "@toss/async-boundary": "^1.4.4",
     "@types/react-responsive": "^8.0.5",
     "axios": "^1.5.0",

packages/web/src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import useAuthCheckQuery from '@/apis/queries/useAuthCheckQuery';
+import { useQuery } from '@tanstack/react-query';
+import { authCheckOption } from '@/apis/queries/useAuthCheckQuery';
 import SignIn from './pages/Signin';
 import SignUp from './pages/Signup';
 import MainLayout from './routes/layout';
@@ -14,7 +15,7 @@ import NotFound from './pages/NotFound';
 import SlackConfirmationWrapper from './pages/Setting/SlackConfirmation';
 
 const App = () => {
-  useAuthCheckQuery();
+  useQuery({ ...authCheckOption });
 
   return (
     <Router>

packages/web/src/apis/mutations/useDeleteCommentMutation.ts

@@ -28,7 +28,7 @@ const useDeleteCommentMutation = (commentId: string) => {
   return useMutation<CommentResponse, AxiosError, CustomRequestData>({
     mutationFn: () => deleteComment({ commentId }),
     onSuccess: () => {
-      queryClient.invalidateQueries(queryKey.posts.all);
+      queryClient.invalidateQueries({ queryKey: queryKey.posts.all });
     }
   });
 };

packages/web/src/apis/mutations/useDeletePostMutation.ts

@@ -28,8 +28,12 @@ const useDeletePostMutation = (postId: string) => {
   return useMutation<PostResponse, AxiosError, CustomRequestData>({
     mutationFn: () => deletePost({ postId }),
     onSuccess: (data) => {
-      queryClient.invalidateQueries(queryKey.posts.all);
-      queryClient.removeQueries(queryKey.posts.detail(data._id));
+      queryClient.invalidateQueries({
+        queryKey: queryKey.posts.all
+      });
+      queryClient.removeQueries({
+        queryKey: queryKey.posts.detail(data._id)
+      });
     }
   });
 };

packages/web/src/apis/mutations/useNewPostMutation.ts

@@ -29,7 +29,9 @@ const useNewPostMutation = () => {
   return useMutation<ResponseData, AxiosError, CustomRequestData>({
     mutationFn: postNewPost,
     onSuccess: () => {
-      queryClient.invalidateQueries(queryKey.posts.list);
+      queryClient.invalidateQueries({
+        queryKey: queryKey.posts.list
+      });
     },
     onError: (error) => {
       console.log(error);

packages/web/src/apis/mutations/useSignOutMutation.ts

@@ -17,7 +17,9 @@ const useSignOutMutation = () => {
     mutationFn: postSignOut,
     onMutate: () => {
       storage('local').removeItem(AUTH_TOKEN);
-      queryClient.removeQueries(queryKey.auth);
+      queryClient.removeQueries({
+        queryKey: queryKey.auth
+      });
     }
   });
 };

packages/web/src/apis/mutations/useWriteCommentMutation.ts

@@ -1,11 +1,11 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { authInstance } from '@/apis/instance';
 import queryKey from '@/apis/queryKeys';
 import type { CommentField } from 'common/types';
 import type { CommentResponse } from 'common/types/raws';
 import useSlackMessageMutation from './useSlackMessageMutation';
-import usePostDetailQuery from '../queries/usePostDetailQuery';
+import { postDetailQueryOption } from '../queries/usePostDetailQuery';
 
 interface CustomRequestData extends CommentField {
   postId: string;
@@ -35,12 +35,14 @@ const postWriteComment = async ({ content, position, nickname, decorationImageNa
 const useWriteCommentMutation = (postId: string) => {
   const queryClient = useQueryClient();
   const { mutate: slackMessage } = useSlackMessageMutation();
-  const { data: postData } = usePostDetailQuery(postId);
+  const { data: postData } = useQuery({ ...postDetailQueryOption(postId) });
 
   return useMutation<CommentResponse, AxiosError, CustomRequestData>({
     mutationFn: postWriteComment,
     onSuccess: (data) => {
-      queryClient.invalidateQueries(queryKey.posts.all);
+      queryClient.invalidateQueries({
+        queryKey: queryKey.posts.all
+      });
 
       const postAuthor = postData?.author;
       if (postAuthor?.slackId === undefined) return;

packages/web/src/apis/queries/useAuthCheckQuery.ts

@@ -1,11 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import { authInstance } from '@/apis/instance';
 import queryKey from '@/apis/queryKeys';
 import parseUser from 'common/utils/parseUser';
 import storage from '@/utils/storage';
 import { AUTH_TOKEN } from '@/constants/storageKey';
-import type { User } from 'common/types';
-import type { QueryOptions } from '@/apis/types';
 import type { UserResponse } from 'common/types/raws';
 
 export const getAuthUser = async () => {
@@ -19,13 +17,8 @@ export const getAuthUser = async () => {
   return parseUser(data);
 };
 
-const useAuthCheckQuery = (options?: QueryOptions<User>) => {
-  return useQuery<User>({
-    queryKey: queryKey.auth,
-    queryFn: getAuthUser,
-    staleTime: Infinity,
-    ...options
-  });
-};
-
-export default useAuthCheckQuery;
+export const authCheckOption = queryOptions({
+  queryKey: queryKey.auth,
+  queryFn: getAuthUser,
+  staleTime: Infinity
+});

packages/web/src/apis/queries/useGetPostsInfoQuery.ts

@@ -1,10 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions } from '@tanstack/react-query';
 import { baseInstance } from '@/apis/instance';
-import { QueryOptions } from '@/apis/types';
 import { PostResponse } from 'common/types/raws';
 import queryKey from '@/apis/queryKeys';
 import parsePost from 'common/utils/parsePost';
-import { Post } from 'common/types';
 
 const CHANNEL_ID = import.meta.env.VITE_CHANNEL_ID;
 
@@ -14,12 +12,7 @@ export const getPostsInfo = async () => {
   return data.map((post) => parsePost(post));
 };
 
-const useGetPostsInfoQuery = (options?: QueryOptions<Post[]>) => {
-  return useQuery<Post[]>({
-    queryKey: queryKey.posts.all,
-    queryFn: () => getPostsInfo(),
-    ...options
-  });
-};
-
-export default useGetPostsInfoQuery;
+export const getPostsInfoQueryOption = queryOptions({
+  queryKey: queryKey.posts.all,
+  queryFn: () => getPostsInfo()
+});