refactor/#761: suspense 사용하는 useQuery를 useSuspenseQuery로 교체

frontend/package.json

@@ -39,14 +39,16 @@
     "@emotion/styled": "^11.11.0",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@tanstack/react-query": "^5.13.4",
+    "assert": "^2.1.0",
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
     "dotenv": "^16.3.1",
     "hang-log-design-system": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
@@ -63,7 +65,7 @@
     "@storybook/react-webpack5": "^7.2.2",
     "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^8.0.1",
-    "@tanstack/react-query-devtools": "^4.29.23",
+    "@tanstack/react-query-devtools": "^5.13.4",
     "@testing-library/cypress": "^9.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/google.maps": "^3.53.5",

frontend/src/constants/trip.ts

@@ -27,4 +27,4 @@ export const TRIP_TYPE = {
   PERSONAL: 'PERSONAL',
   SHARED: 'SHARED',
   PUBLISHED: 'PUBLISHED',
-};
+} as const;

frontend/src/hooks/api/queryClient.ts

@@ -6,9 +6,7 @@ export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: NETWORK.RETRY_COUNT,
-      suspense: true,
-      useErrorBoundary: true,
-      cacheTime: 0,
+      gcTime: 0,
     },
   },
 });

frontend/src/hooks/api/useCityQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,12 @@ import { getCity } from '@api/city/getCity';
 import type { CityData } from '@type/city';
 
 export const useCityQuery = () => {
-  const { data } = useQuery<CityData[], AxiosError>(['city'], getCity, {
-    cacheTime: 24 * 60 * 60 * 60 * 1000,
+  const { data: cityData } = useSuspenseQuery<CityData[], AxiosError>({
+    queryKey: ['city'],
+    queryFn: getCity,
+    gcTime: 24 * 60 * 60 * 60 * 1000,
     staleTime: Infinity,
   });
 
-  return { cityData: data! };
+  return { cityData };
 };

frontend/src/hooks/api/useCommunityTripQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { useRecoilValue } from 'recoil';
 
@@ -13,9 +13,10 @@ import type { TripData } from '@type/trip';
 export const useCommunityTripQuery = (tripId: string) => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const { data } = useQuery<TripData, AxiosError>(['PUBLISHED', tripId], () =>
-    getCommunityTrip(tripId, isLoggedIn)
-  );
+  const { data: communityTripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['published', tripId],
+    queryFn: () => getCommunityTrip(tripId, isLoggedIn),
+  });
 
-  return { tripData: data! };
+  return { communityTripData };
 };

frontend/src/hooks/api/useCommunityTripsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,9 +7,10 @@ import { getCommunityTrips } from '@api/trips/getCommunityTrips';
 import type { CommunityTripsData } from '@type/trips';
 
 export const useCommunityTripsQuery = (page: number, size: number, isLoggedIn: boolean) => {
-  const { data } = useQuery<CommunityTripsData, AxiosError>(['communityTrips', page], () =>
-    getCommunityTrips(page, size, isLoggedIn)
-  );
+  const { data: communityTripsData } = useSuspenseQuery<CommunityTripsData, AxiosError>({
+    queryKey: ['communityTrips', page, size, isLoggedIn],
+    queryFn: () => getCommunityTrips(page, size, isLoggedIn),
+  });
 
-  return { tripsData: data! };
+  return { communityTripsData };
 };

frontend/src/hooks/api/useDayLogTitleMutation.ts

@@ -26,7 +26,7 @@ export const useDayLogTitleMutation = () => {
       createToast('소제목 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.');
     },
     onSuccess: (_, { tripId }) => {
-      queryClient.invalidateQueries(['trip', tripId]);
+      queryClient.invalidateQueries({ queryKey: ['trip', tripId] });
     },
   });
 

frontend/src/hooks/api/useExpenseCategoryQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,10 @@ import { getExpenseCategory } from '@api/expense/getExpenseCategory';
 import type { ExpenseCategoryData } from '@type/expense';
 
 export const useExpenseCategoryQuery = () => {
-  const { data } = useQuery<ExpenseCategoryData[], AxiosError>(
-    ['expenseCategory'],
-    getExpenseCategory
-  );
+  const { data: expenseCategoryData } = useSuspenseQuery<ExpenseCategoryData[], AxiosError>({
+    queryKey: ['expenseCategory'],
+    queryFn: getExpenseCategory,
+  });
 
-  return { expenseCategoryData: data! };
+  return { expenseCategoryData };
 };

frontend/src/hooks/api/useExpenseQuery.ts

@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { match } from 'ts-pattern';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -24,14 +26,15 @@ export const useExpenseQuery = (tripId: string, tripType: TripTypeData) => {
     queryFn.expense = () => getSharedExpense(tripId);
   }
 
-  const { data } = useQuery<ExpenseData, AxiosError>(
-    [`${tripType}expense`, tripId],
-    queryFn.expense,
-    {
-      cacheTime: 5 * 60 * 1000,
-      staleTime: 60 * 1000,
-    }
-  );
-
-  return { expenseData: data! };
+  const { data: expenseData } = useSuspenseQuery<ExpenseData, AxiosError>({
+    queryKey: ['expense', tripType, tripId],
+    queryFn: match(tripType)
+      .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTripExpense(tripId))
+      .with(TRIP_TYPE.SHARED, () => () => getSharedExpense(tripId))
+      .otherwise(() => () => getExpense(tripId)),
+    gcTime: 5 * 60 * 1000,
+    staleTime: 60 * 1000,
+  });
+
+  return { expenseData };
 };

frontend/src/hooks/api/useRecommendedTripsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,9 +7,10 @@ import { getRecommendedTrips } from '@api/trips/getRecommendedTrips';
 import type { RecommendedTripsData } from '@type/trips';
 
 export const useRecommendedTripsQuery = (isLoggedIn: boolean) => {
-  const { data } = useQuery<RecommendedTripsData, AxiosError>(['recommendedTrips'], () =>
-    getRecommendedTrips(isLoggedIn)
-  );
+  const { data: recommendedTripsData } = useSuspenseQuery<RecommendedTripsData, AxiosError>({
+    queryKey: ['recommendedTrips', isLoggedIn],
+    queryFn: () => getRecommendedTrips(isLoggedIn),
+  });
 
-  return { tripsData: data! };
+  return { recommendedTripsData };
 };

frontend/src/hooks/api/useSharedTripQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,7 +7,10 @@ import { getSharedTrip } from '@api/trip/getSharedTrip';
 import type { TripData } from '@type/trip';
 
 export const useSharedTripQuery = (tripId: string) => {
-  const { data } = useQuery<TripData, AxiosError>(['SHARED', tripId], () => getSharedTrip(tripId));
+  const { data: sharedTripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['shared', tripId],
+    queryFn: () => getSharedTrip(tripId),
+  });
 
-  return { tripData: data! };
+  return { sharedTripData };
 };

frontend/src/hooks/api/useTripEditPageQueries.ts

@@ -1,17 +1,17 @@
-import { useQueries } from '@tanstack/react-query';
+import { useSuspenseQueries } from '@tanstack/react-query';
 
 import { getExpenseCategory } from '@api/expense/getExpenseCategory';
 import { getTrip } from '@api/trip/getTrip';
 
 import { TRIP_TYPE } from '@constants/trip';
 
 export const useTripEditPageQueries = (tripId: string) => {
-  const [tripQuery, expenseCategoryQuery] = useQueries({
+  const [{ data: tripData }, { data: expenseCategoryData }] = useSuspenseQueries({
     queries: [
       { queryKey: [TRIP_TYPE.PERSONAL, tripId], queryFn: () => getTrip(tripId) },
       { queryKey: ['expenseCategory'], queryFn: getExpenseCategory, staleTime: Infinity },
     ],
   });
 
-  return { tripData: tripQuery.data!, expenseCategoryData: expenseCategoryQuery.data! };
+  return { tripData, expenseCategoryData };
 };

frontend/src/hooks/api/useTripQuery.ts

@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { match } from 'ts-pattern';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { useRecoilValue } from 'recoil';
 
@@ -17,22 +19,15 @@ import { TRIP_TYPE } from '@constants/trip';
 export const useTripQuery = (tripType: TripTypeData, tripId: string) => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const queryFn: { trip: () => Promise<TripData> } = {
-    trip: () => getTrip(tripId),
-  };
-
-  if (tripType === TRIP_TYPE.PUBLISHED) {
-    queryFn.trip = () => getCommunityTrip(tripId, isLoggedIn);
-  }
-
-  if (tripType === TRIP_TYPE.SHARED) {
-    queryFn.trip = () => getSharedTrip(tripId);
-  }
-
-  const { data } = useQuery<TripData, AxiosError>([tripType, tripId], queryFn.trip, {
-    cacheTime: 5 * 60 * 1000,
+  const { data: tripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['trip', tripType, tripId],
+    queryFn: match(tripType)
+      .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTrip(tripId, isLoggedIn))
+      .with(TRIP_TYPE.SHARED, () => () => getSharedTrip(tripId))
+      .otherwise(() => () => getTrip(tripId)),
+    gcTime: 5 * 60 * 1000,
     staleTime: 60 * 1000,
   });
 
-  return { tripData: data! };
+  return { tripData };
 };

frontend/src/hooks/api/useTripsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,7 +7,10 @@ import { getTrips } from '@api/trips/getTrips';
 import type { TripsData } from '@type/trips';
 
 export const useTripsQuery = () => {
-  const { data } = useQuery<TripsData[], AxiosError>(['trips'], getTrips);
+  const { data: tripsData } = useSuspenseQuery<TripsData[], AxiosError>({
+    queryKey: ['trips'],
+    queryFn: getTrips,
+  });
 
-  return { tripsData: data! };
+  return { tripsData };
 };

frontend/src/hooks/api/useUserInfoMutation.ts

@@ -17,7 +17,7 @@ export const useUserInfoMutation = () => {
   const userInfoMutation = useMutation({
     mutationFn: putUserInfo,
     onSuccess: () => {
-      queryClient.invalidateQueries(['userInfo']);
+      queryClient.invalidateQueries({ queryKey: ['userInfo'] });
 
       createToast('정보를 성공적으로 수정했습니다!', 'success');
     },

frontend/src/hooks/api/useUserInfoQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,12 @@ import { getUserInfo } from '@api/member/getUserInfo';
 import type { UserData } from '@type/member';
 
 export const useUserInfoQuery = () => {
-  const { data } = useQuery<UserData, AxiosError>(['userInfo'], getUserInfo, {
-    cacheTime: 60 * 60 * 60 * 1000,
+  const { data: userInfoData } = useSuspenseQuery<UserData, AxiosError>({
+    queryKey: ['userInfo'],
+    queryFn: getUserInfo,
+    gcTime: 60 * 60 * 60 * 1000,
     staleTime: 60 * 60 * 60 * 1000,
   });
 
-  return { userInfoData: data! };
+  return { userInfoData };
 };

frontend/src/hooks/common/useMultipleImageUpload.ts

@@ -24,7 +24,7 @@ export const useMultipleImageUpload = ({
   onError,
 }: UseMultipleImageUploadParams) => {
   const imageMutation = useImageMutation();
-  const isImageUploading = imageMutation.isLoading;
+  const isImageUploading = imageMutation.isPending;
 
   const initialImageUrls = convertToImageUrls([...initialImageNames]);
 

frontend/src/hooks/common/useSingleImageUpload.ts

@@ -19,7 +19,7 @@ export const useSingleImageUpload = ({
   updateFormImage,
 }: UseSingleImageUploadParams) => {
   const imageMutation = useImageMutation();
-  const isImageUploading = imageMutation.isLoading;
+  const isImageUploading = imageMutation.isPending;
 
   const [uploadedImageUrl, setUploadedImageUrl] = useState(initialImageUrl);
 

frontend/src/pages/CommunityPage/CommunityPage.tsx

@@ -21,8 +21,8 @@ const CommunityPage = () => {
 
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const { tripsData: recommendedTripsData } = useRecommendedTripsQuery(isLoggedIn);
-  const { tripsData: communityTripsData } = useCommunityTripsQuery(page, 10, isLoggedIn);
+  const { recommendedTripsData } = useRecommendedTripsQuery(isLoggedIn);
+  const { communityTripsData } = useCommunityTripsQuery(page, 10, isLoggedIn);
 
   const { pageIndexDatas, changeNavigationDatas } = useTripPageIndex(
     communityTripsData,

frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx

@@ -17,19 +17,19 @@ const CommunityTripPage = () => {
 
   if (!tripId) throw new Error('존재하지 않는 여행입니다.');
 
-  const { tripData } = useCommunityTripQuery(tripId);
+  const { communityTripData } = useCommunityTripQuery(tripId);
 
   const { places, selectedDayLog, handleDayLogIdSelectClick } = useTripPage(
-    tripData.tripType,
+    communityTripData.tripType,
     tripId
   );
 
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripType={tripData.tripType} tripId={tripId} isEditable={false} />
+        <TripInformation tripType={communityTripData.tripType} tripId={tripId} isEditable={false} />
         <DayLogList
-          tripType={tripData.tripType}
+          tripType={communityTripData.tripType}
           tripId={tripId}
           selectedDayLog={selectedDayLog}
           isEditable={false}
@@ -40,8 +40,8 @@ const CommunityTripPage = () => {
         <GoogleMapWrapper>
           <TripMap
             places={places}
-            centerLat={tripData.cities[0].latitude}
-            centerLng={tripData.cities[0].longitude}
+            centerLat={communityTripData.cities[0].latitude}
+            centerLng={communityTripData.cities[0].longitude}
           />
         </GoogleMapWrapper>
       </section>