Feature : @tanstack/react-query v5 마이그레이션 (#581)

* feat : tastack/query V4 에서 V5로 업그레이드

* feat: @suspensive/react제거

* feat : profile, common쪽 query 마이그레이션

* feat : Hydartion 마이그레이션

* feat : meeting, grouping 페이지 마이그레이션

* feat : QueryAsyncBoundary에서 Suspense로 마이그레이션

* feat : query V5에서 제거된 logger 옵션

* feat : groups, meeting mutation 마이그레이션

* feat : auth 마이그레이션

* feat : 학교 검색 컴포넌트 분리

* feat : 닉네임 중복 query 마이그레이션

* refactor : 옵셔널 체이닝으로 코드 단순화

* feat : infiniteQuery프토퍼티에 initialPage를 추가

* feat : profile 마이그레이션

* feat : isLoading에서 isPending으로 마이그레이션

* feat: : useCallback의 depedency추가

* refactor : pretter 적용

README.md

@@ -43,7 +43,6 @@ Gloddy는 국적에 상관없이 자유롭게 모임을 형성하고 원하는 
  </tr>
 </table>
 
-
 ## 🛠️ 기술 스택
 
 <div align='center'>

package.json

@@ -21,10 +21,8 @@
  "@sentry/cli": "^2.20.4",
  "@sentry/nextjs": "^7.62.0",
  "@sentry/utils": "^7.62.0",
- "@suspensive/react": "^1.11.3",
- "@suspensive/react-query": "^1.11.3",
- "@tanstack/react-query": "^4.29.19",
- "@tanstack/react-query-devtools": "^4.29.19",
+ "@tanstack/react-query": "^5.17.15",
+ "@tanstack/react-query-devtools": "^5.17.18",
  "accept-language": "^3.0.18",
  "axios": "^1.4.0",
  "browser-image-compression": "^2.0.2",

src/apis/auth/mutations.ts

@@ -12,24 +12,22 @@ import useAppRouter from '@/hooks/useAppRouter';
 import { setTokenAtCookie } from '@/utils/auth/tokenController';
 import { useMutation } from '@tanstack/react-query';
 
-export const useLoginMutation = () => useMutation(postLogin);
+export const useLoginMutation = () => useMutation({ mutationFn: postLogin });
 
-export const useReissueMutation = () => useMutation(postReissue);
+export const useReissueMutation = () => useMutation({ mutationFn: postReissue });
 
-export const useSMSMutation = () => useMutation(postSMS);
+export const useSMSMutation = () => useMutation({ mutationFn: postSMS });
 
-export const useSMSVerifyMutation = () =>
- useMutation(postSMSVerify, {
- onError: () => {},
- });
+export const useSMSVerifyMutation = () => useMutation({ mutationFn: postSMSVerify });
 
-export const useEmailMutation = () => useMutation(postEmail);
+export const useEmailMutation = () => useMutation({ mutationFn: postEmail });
 
-export const useEmailVerifyMutation = () => useMutation(postEmailVerify);
+export const useEmailVerifyMutation = () => useMutation({ mutationFn: postEmailVerify });
 
 export const useSignUpMutation = () => {
  const { push } = useAppRouter();
- return useMutation(postSignUp, {
+ return useMutation({
+ mutationFn: postSignUp,
  onSuccess: (data: SignUpResponse) => {
  const {
  userId,

src/apis/auth/queries.ts

@@ -1,51 +1,21 @@
-'use client';
 import { Keys, NicknameDuplicateResponse, getNicknameDuplicate, getSchoolSearch } from '.';
-import { useSuspenseQuery } from '@suspensive/react-query';
-import { useState } from 'react';
-import { UseFormClearErrors, UseFormSetError } from 'react-hook-form';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 export const useGetSearchSchool = (searchWord: string) =>
- useSuspenseQuery(Keys.getSchoolSearch(searchWord), () => getSchoolSearch(searchWord), {
- enabled: !!searchWord,
+ useSuspenseQuery({
+ queryKey: Keys.getSchoolSearch(searchWord),
+ queryFn: () => getSchoolSearch(searchWord),
  });
 
-type InputType = { nickname: string };
 interface UseGetNicknameDuplicateProps {
  nickname: string;
- setError: UseFormSetError<InputType>;
- clearErrors: UseFormClearErrors<InputType>;
 }
 
-export const useGetNicknameDuplicate = ({
- nickname,
- setError,
- clearErrors,
-}: UseGetNicknameDuplicateProps) => {
- const [isDuplicateChecked, setIsDuplicateChecked] = useState(false);
- const checkNicknameDuplicate = (isExistNickname: boolean) => {
- if (isExistNickname) {
- setError('nickname', {
- type: 'duplicate',
- message: '이미 사용중인 닉네임입니다.',
- });
- } else {
- setIsDuplicateChecked(true);
- clearErrors('nickname');
- }
- };
-
+export const useGetNicknameDuplicate = ({ nickname }: UseGetNicknameDuplicateProps) => {
  return {
- ...useSuspenseQuery<NicknameDuplicateResponse>(
- Keys.getNicknameDuplicate(nickname),
- () => getNicknameDuplicate(nickname),
- {
- enabled: false,
- onSuccess: (data) => {
- checkNicknameDuplicate(data.isExistNickname);
- },
- }
- ),
- isDuplicateChecked,
- setIsDuplicateChecked,
+ ...useQuery<NicknameDuplicateResponse>({
+ queryKey: Keys.getNicknameDuplicate(nickname),
+ queryFn: () => getNicknameDuplicate(nickname),
+ }),
  };
 };

src/apis/common/mutations.ts

@@ -2,5 +2,5 @@ import { postFiles } from './apis';
 import { useMutation } from '@tanstack/react-query';
 
 export const usePostFiles = () => {
- return useMutation(postFiles);
+ return useMutation({ mutationFn: postFiles });
 };

src/apis/groups/mutations.tsx

@@ -24,9 +24,10 @@ export const usePostCreateGroup = () => {
  const { replace } = useAppRouter();
  const queryClient = useQueryClient();
 
- return useMutation(postCreateGroup, {
+ return useMutation({
+ mutationFn: postCreateGroup,
  onSuccess: (data) => {
- queryClient.resetQueries(GroupsKeys.getGroups());
+ queryClient.resetQueries({ queryKey: GroupsKeys.getGroups() });
  replace(`/grouping/${data.groupId}`);
  },
  });
@@ -36,10 +37,11 @@ export const usePostArticle = (groupId: number) => {
  const { replace } = useAppRouter();
  const queryClient = useQueryClient();
 
- return useMutation(postArticle, {
+ return useMutation({
+ mutationFn: postArticle,
  onSuccess: (data) => {
- queryClient.invalidateQueries(GroupsKeys.getArticles(groupId));
- queryClient.invalidateQueries(GroupsKeys.getNotices(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getArticles(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getNotices(groupId) });
  replace(`/grouping/${groupId}/articles/${data.articleId}`);
  },
  });
@@ -49,10 +51,11 @@ export const useDeleteArticle = (groupId: number) => {
  const { replace } = useAppRouter();
  const queryClient = useQueryClient();
 
- return useMutation(deleteArticle, {
+ return useMutation({
+ mutationFn: deleteArticle,
  onSuccess: () => {
- queryClient.invalidateQueries(GroupsKeys.getArticles(groupId));
- queryClient.invalidateQueries(GroupsKeys.getNotices(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getArticles(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getNotices(groupId) });
  replace(`/grouping/${groupId}?tab=articles`);
  },
  });
@@ -61,21 +64,23 @@ export const useDeleteArticle = (groupId: number) => {
 export const usePostComment = (groupId: number, articleId: number) => {
  const queryClient = useQueryClient();
 
- return useMutation(postComment, {
+ return useMutation({
+ mutationFn: postComment,
  onSuccess: () => {
- queryClient.invalidateQueries(GroupsKeys.getComments(groupId, articleId));
- queryClient.invalidateQueries(GroupsKeys.getArticle(groupId, articleId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getComments(groupId, articleId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getArticle(groupId, articleId) });
  },
  });
 };
 
 export const useDeleteComment = (groupId: number, articleId: number) => {
  const queryClient = useQueryClient();
 
- return useMutation(deleteComment, {
+ return useMutation({
+ mutationFn: deleteComment,
  onSuccess: () => {
- queryClient.invalidateQueries(GroupsKeys.getComments(groupId, articleId));
- queryClient.invalidateQueries(GroupsKeys.getArticle(groupId, articleId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getComments(groupId, articleId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getArticle(groupId, articleId) });
  },
  });
 };
@@ -84,10 +89,11 @@ export const usePostApply = (groupId: number) => {
  const { replace } = useAppRouter();
  const queryClient = useQueryClient();
 
- return useMutation(postApply, {
+ return useMutation({
+ mutationFn: postApply,
  onSuccess: () => {
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
- queryClient.invalidateQueries(GroupsKeys.getGroupMembers(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupMembers(groupId) });
  replace('/meeting/participate?tab=waiting');
  },
  });
@@ -96,20 +102,22 @@ export const usePostApply = (groupId: number) => {
 export const usePatchApply = (groupId: number) => {
  const queryClient = useQueryClient();
 
- return useMutation(patchApply, {
+ return useMutation({
+ mutationFn: patchApply,
  onSuccess: () => {
- queryClient.invalidateQueries(GroupsKeys.getApplies(groupId));
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
- queryClient.invalidateQueries(GroupsKeys.getGroupMembers(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getApplies(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupMembers(groupId) });
  },
  });
 };
 
 export const usePostScrap = (groupId: number) => {
  const queryClient = useQueryClient();
- return useMutation(postScrap, {
+ return useMutation({
+ mutationFn: postScrap,
  onMutate: async () => {
- await queryClient.cancelQueries(GroupsKeys.getGroupDetail(groupId));
+ await queryClient.cancelQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
  const previousData = queryClient.getQueryData<GroupDetailResponse>(
  GroupsKeys.getGroupDetail(groupId)
  );
@@ -121,17 +129,18 @@ export const usePostScrap = (groupId: number) => {
  return { previousData };
  },
  onSettled: () => {
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
  },
  });
 };
 
 export const useDeleteScrapGroups = (groupId: number) => {
  const queryClient = useQueryClient();
 
- return useMutation(deleteScrap, {
+ return useMutation({
+ mutationFn: deleteScrap,
  onMutate: async () => {
- await queryClient.cancelQueries(GroupsKeys.getGroupDetail(groupId));
+ await queryClient.cancelQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
 
  const previousData = queryClient.getQueryData<GroupDetailResponse>(
  GroupsKeys.getGroupDetail(groupId)
@@ -145,17 +154,18 @@ export const useDeleteScrapGroups = (groupId: number) => {
  return { previousData };
  },
  onSettled: () => {
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
  },
  });
 };
 
 export const useDeleteScrapMeeting = (groupId: number) => {
  const queryClient = useQueryClient();
 
- return useMutation(deleteScrap, {
+ return useMutation({
+ mutationFn: deleteScrap,
  onMutate: async () => {
- await queryClient.cancelQueries(MeetingKeys.getMeetingScraps());
+ await queryClient.cancelQueries({ queryKey: MeetingKeys.getMeetingScraps() });
 
  const previousData = queryClient.getQueryData<MeetingScrapResponse>(
  MeetingKeys.getMeetingScraps()
@@ -169,7 +179,7 @@ export const useDeleteScrapMeeting = (groupId: number) => {
  return { previousData };
  },
  onSettled: () => {
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
  },
  });
 };
@@ -178,11 +188,12 @@ export const useDeleteGroupMember = (groupId: number) => {
  const queryClient = useQueryClient();
  const { push } = useAppRouter();
 
- return useMutation(deleteGroupMember, {
+ return useMutation({
+ mutationFn: deleteGroupMember,
  onSuccess: () => {
- queryClient.resetQueries(GroupsKeys.getGroups());
- queryClient.invalidateQueries(GroupsKeys.getGroupDetail(groupId));
- queryClient.invalidateQueries(GroupsKeys.getGroupMembers(groupId));
+ queryClient.resetQueries({ queryKey: GroupsKeys.getGroups() });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupDetail(groupId) });
+ queryClient.invalidateQueries({ queryKey: GroupsKeys.getGroupMembers(groupId) });
  push('/grouping');
  },
  });
@@ -192,7 +203,8 @@ export const usePostEstimate = () => {
  const { push } = useAppRouter();
  const { open } = useModal({ isUnmountExit: false });
 
- return useMutation(postEstimate, {
+ return useMutation({
+ mutationFn: postEstimate,
  onSuccess: () => {
  open(({ exit }) => <FeedbackCompleteModal onClose={exit} />);
  push('/meeting/participate?tab=participating');