refactor: TanStack Query 캐싱 정책 도입 및 QueryClient 인스턴스 고정

src/entities/machine/api/useGetMachines.ts

@@ -1,10 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { get, machineQueryKeys, machineUrl } from "@/shared/api";
 import type { BaseResponseType } from "@/shared/api/types";
+import { STALE_TIME } from "@/shared/constants/queryOptions";
 import type { MachineResponseType } from "../model/types";
 
 export const useGetMachines = (params: { floor?: number } = {}) => {
   return useQuery({
+    staleTime: STALE_TIME.MACHINE,
     queryKey: machineQueryKeys.getMachines(params),
     queryFn: async () => {
       const [washers, dryers] = await Promise.all([

src/entities/report/api/useGetMalfunctionReports.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { reportQueryKeys } from "@/shared/api";
 import type { BaseResponseType } from "@/shared/api/types";
+import { STALE_TIME } from "@/shared/constants/queryOptions";
 import type { ReportParamsType, ReportResponseType } from "../model/types";
 import { getMalfunctionReports as fetchMalfunctionReports } from "./getMalfunctionReports";
 
@@ -11,6 +12,7 @@ export const useGetMalfunctionReports = (
   const queryKey = reportQueryKeys.getMalfunctionReports(params || {});
 
   return useQuery({
+    staleTime: STALE_TIME.REPORT,
     queryKey,
     queryFn: () => fetchMalfunctionReports(params),
     initialData,

src/entities/reservation/api/useGetReservations.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { reservationQueryKeys } from "@/shared/api";
+import { STALE_TIME } from "@/shared/constants/queryOptions";
 import type { ReservationItem, ReservationParamsType } from "../model/types";
 import { getReservations as fetchReservations } from "./getReservations";
 
@@ -10,6 +11,7 @@ export const useGetReservations = (
   const queryKey = reservationQueryKeys.getReservations(params || {});
 
   return useQuery({
+    staleTime: STALE_TIME.RESERVATION,
     queryKey,
     queryFn: () => fetchReservations(params),
     initialData,

src/entities/user/api/useGetMyInfo.ts

@@ -1,10 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { get, userQueryKeys, userUrl } from "@/shared/api";
 import type { BaseResponseType } from "@/shared/api/types";
+import { STALE_TIME } from "@/shared/constants/queryOptions";
 import type { MyInfoType } from "../model/types";
 
 export const useGetMyInfo = () => {
   return useQuery({
+    staleTime: STALE_TIME.MY_INFO,
     queryKey: userQueryKeys.getMyInfo(),
     queryFn: () => get<BaseResponseType<MyInfoType>>(userUrl.getMyInfo()),
   });

src/entities/user/api/useGetUsers.ts

@@ -1,5 +1,6 @@
-import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { userQueryKeys } from "@/shared/api";
+import { STALE_TIME } from "@/shared/constants/queryOptions";
 import type { ManagedUserItem, UserParamsType } from "../model/types";
 import { getUsers as fetchUsers } from "./getUsers";
 
@@ -10,6 +11,7 @@ export const useGetUsers = (
   const queryKey = userQueryKeys.getUsers(params || {});
 
   return useQuery({
+    staleTime: STALE_TIME.USER,
     queryKey,
     queryFn: () => fetchUsers(params),
     initialData,

src/shared/constants/queryOptions.ts

@@ -0,0 +1,21 @@
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+
+/**
+ * 도메인별 신선도 기준.
+ * 세탁기 상태는 사용자가 기기를 쓰는 즉시 바뀌므로 짧게,
+ * 관리자 계정 정보처럼 세션 중 사실상 고정인 값은 길게 잡는다.
+ */
+export const STALE_TIME = {
+  MACHINE: 30 * SECOND,
+  RESERVATION: MINUTE,
+  REPORT: 3 * MINUTE,
+  USER: 3 * MINUTE,
+  MY_INFO: 30 * MINUTE,
+} as const;
+
+export const DEFAULT_STALE_TIME = MINUTE;
+
+// gcTime이 가장 긴 staleTime보다 짧으면 비활성 쿼리의 캐시가 먼저 수거되어
+// staleTime이 무의미해지므로, STALE_TIME의 최댓값(MY_INFO) 이상으로 잡는다.
+export const DEFAULT_GC_TIME = 30 * MINUTE;

src/shared/lib/TanStackProvider.tsx

@@ -2,18 +2,28 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import type { PropsWithChildren } from "react";
+import { type PropsWithChildren, useState } from "react";
 
+import {
+  DEFAULT_GC_TIME,
+  DEFAULT_STALE_TIME,
+} from "@/shared/constants/queryOptions";
 import { cn } from "@/shared/lib/cn";
 
 const TanStackProvider = ({ children }: PropsWithChildren) => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  });
+  // QueryClient를 렌더마다 새로 만들면 캐시가 통째로 버려지므로 인스턴스를 고정한다.
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: DEFAULT_STALE_TIME,
+            gcTime: DEFAULT_GC_TIME,
+          },
+        },
+      }),
+  );
 
   return (
     <QueryClientProvider client={queryClient}>