[REFACTOR] cache 상수화 및 관리

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.90.19",
+    "@tanstack/react-query-devtools": "^5.91.3",
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/features/home/api/company.ts

@@ -1,5 +1,6 @@
 import { HOME_QUERY_KEY } from "../consts/queryKeys";
 import api from "@/shared/api/api";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import { API_ENDPOINTS } from "@/shared/consts/endpoints";
 import { useSuspenseQuery } from "@tanstack/react-query";
 
@@ -12,7 +13,9 @@ export const getCompanyList = async () => {
 export const useGetCompany = () => {
   return useSuspenseQuery({
     queryFn: getCompanyList,
-    queryKey: [HOME_QUERY_KEY.COMPANY],
+    queryKey: [HOME_QUERY_KEY.COMPANIES],
     select: res => res.data,
+    staleTime: QUERY_CACHE_TIME.COMPANIES.staleTime,
+    gcTime: QUERY_CACHE_TIME.COMPANIES.gcTime,
   });
 };

src/features/home/api/recommendation.ts

@@ -1,4 +1,5 @@
 import api from "@/shared/api/api";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import { HOME_QUERY_KEY } from "../consts/queryKeys";
 import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
 import { API_ENDPOINTS } from "@/shared/consts/endpoints";
@@ -13,13 +14,15 @@ export const getRecommendPostList = async () => {
 export const useGetRecommendPostList = (isLogin: boolean) => {
   return useQuery({
     queryKey: [
-      HOME_QUERY_KEY.POSTS,
+      SHARED_QUERY_KEY.POSTS,
       SHARED_QUERY_KEY.MY,
       HOME_QUERY_KEY.POSTS_RECOMMEND,
     ],
     queryFn: getRecommendPostList,
     select: res => res.data,
     enabled: isLogin,
+    staleTime: QUERY_CACHE_TIME.POSTS.staleTime,
+    gcTime: QUERY_CACHE_TIME.POSTS.gcTime,
   });
 };
 
@@ -32,7 +35,7 @@ export const postRecommendList = async () => {
 export const usePostRecommendPostList = () => {
   const queryClient = useQueryClient();
   const queryKey = [
-    HOME_QUERY_KEY.POSTS,
+    SHARED_QUERY_KEY.POSTS,
     SHARED_QUERY_KEY.MY,
     HOME_QUERY_KEY.POSTS_RECOMMEND,
   ] as const;

src/features/home/api/search.ts

@@ -3,7 +3,9 @@ import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import type { SearchType } from "./search.types";
 import { HOME_QUERY_KEY } from "../consts/queryKeys";
 import api from "@/shared/api/api";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import { API_ENDPOINTS } from "@/shared/consts/endpoints";
+import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
 
 export const getSearchPost = async (query: string) => {
   const { data } = await api.get(API_ENDPOINTS.search, { params: { query } });
@@ -12,9 +14,11 @@ export const getSearchPost = async (query: string) => {
 
 export const useGetSearchPost = (query: string) => {
   return useSuspenseQuery({
-    queryKey: [HOME_QUERY_KEY.POSTS, HOME_QUERY_KEY.POSTS_SEARCH, query],
+    queryKey: [SHARED_QUERY_KEY.POSTS, HOME_QUERY_KEY.POSTS_SEARCH, query],
     queryFn: () => getSearchPost(query),
     select: res => res.data,
+    staleTime: QUERY_CACHE_TIME.POSTS.staleTime,
+    gcTime: QUERY_CACHE_TIME.POSTS.gcTime,
   });
 };
 

src/features/home/consts/queryKeys.ts

@@ -1,7 +1,6 @@
 export const HOME_QUERY_KEY = {
-  COMPANY: "company",
-  POSTS: "posts",
-  POSTS_COMPANIES: "companies",
+  COMPANIES: "companies", // 게시글이 있는 회사 목록 조회
+  POSTS_BY_COMPANY: "by-company", // 회사 기준 게시글 목록 조회
   POSTS_RECOMMEND: "recommend",
   POSTS_SEARCH: "search",
 } as const;

src/features/home/model/useInfiniteCompaniesPosts.ts

@@ -1,3 +1,5 @@
+import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import { getCompaniesPostList } from "../api/post";
 import { HOME_QUERY_KEY } from "../consts/queryKeys";
 import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
@@ -6,15 +8,15 @@ interface UseInfiniteCompaniesPostsParams {
   companies: string[];
   size?: number;
 }
-
+//기업별 게시글 필터링 조회
 export const useInfiniteCompaniesPosts = ({
   companies,
   size = 20,
 }: UseInfiniteCompaniesPostsParams) => {
   return useSuspenseInfiniteQuery({
     queryKey: [
-      HOME_QUERY_KEY.POSTS,
-      HOME_QUERY_KEY.POSTS_COMPANIES,
+      SHARED_QUERY_KEY.POSTS,
+      HOME_QUERY_KEY.POSTS_BY_COMPANY,
       companies,
     ] as const,
     queryFn: ({ pageParam }) =>
@@ -36,7 +38,7 @@ export const useInfiniteCompaniesPosts = ({
     },
 
     select: res => res.pages,
-    staleTime: 1000 * 60 * 5,
-    gcTime: 1000 * 60 * 10,
+    staleTime: QUERY_CACHE_TIME.POSTS.staleTime,
+    gcTime: QUERY_CACHE_TIME.POSTS.gcTime,
   });
 };

src/features/home/model/useInfinitePosts.ts

@@ -1,19 +1,18 @@
 import { getPostList } from "../api/post";
-import { HOME_QUERY_KEY } from "../consts/queryKeys";
-import type {
-  PageParamType,
-  PostResponseDto,
-} from "../api/post.types";
+import type { PageParamType, PostResponseDto } from "../api/post.types";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import {
   useSuspenseInfiniteQuery,
   type QueryFunctionContext,
 } from "@tanstack/react-query";
+import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
 
 interface UseInfinitePostsParams {
   sortBy: "LATEST" | "POPULAR";
   size?: number;
 }
 
+//인기순, 최근생성된 게시글
 export const useInfinitePosts = ({
   sortBy,
   size = 20,
@@ -22,14 +21,14 @@ export const useInfinitePosts = ({
     PostResponseDto,
     Error,
     PostResponseDto[],
-    readonly [typeof HOME_QUERY_KEY.POSTS, "LATEST" | "POPULAR"],
+    readonly [typeof SHARED_QUERY_KEY.POSTS, "LATEST" | "POPULAR"],
     PageParamType
   >({
-    queryKey: [HOME_QUERY_KEY.POSTS, sortBy] as const,
+    queryKey: [SHARED_QUERY_KEY.POSTS, sortBy] as const,
     queryFn: ({
       pageParam,
     }: QueryFunctionContext<
-      readonly [typeof HOME_QUERY_KEY.POSTS, "LATEST" | "POPULAR"],
+      readonly [typeof SHARED_QUERY_KEY.POSTS, "LATEST" | "POPULAR"],
       PageParamType
     >) =>
       getPostList({
@@ -56,7 +55,7 @@ export const useInfinitePosts = ({
     },
 
     select: res => res.pages,
-    staleTime: 1000 * 60 * 5,
-    gcTime: 1000 * 60 * 10,
+    staleTime: QUERY_CACHE_TIME.POSTS.staleTime,
+    gcTime: QUERY_CACHE_TIME.POSTS.gcTime,
   });
 };

src/features/home/ui/PostCardList.tsx

@@ -16,7 +16,7 @@ const PostCardList = ({ selectedTab }: PostCardListProps) => {
   const { companies } = useCompanyStore();
   const infiniteRef = useRef<HTMLDivElement | null>(null);
 
-  const companyQuery = useInfiniteCompaniesPosts({ companies });
+  const companyQuery = useInfiniteCompaniesPosts({ companies }); //기업별 post List
   const recentQuery = useInfinitePosts({ sortBy: "LATEST" });
   const popularQuery = useInfinitePosts({ sortBy: "POPULAR" });
   const { user } = useUserStore();
@@ -48,6 +48,7 @@ const PostCardList = ({ selectedTab }: PostCardListProps) => {
           (page: PostResponseDto) => page.data.posts,
         ) ?? []);
 
+  console.log(posts);
   return (
     <>
       <ul className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

src/features/mypage/api/myEdit.ts

@@ -7,6 +7,7 @@ import { useEditTagStore } from "../model/useEditTagStore";
 import api from "@/shared/api/api";
 import { API_ENDPOINTS } from "@/shared/consts/endpoints";
 import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
+import { HOME_QUERY_KEY } from "@/features/home/consts/queryKeys";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 // 내 관심사 수정 =>mypage
@@ -18,31 +19,42 @@ export const putMyInterst = async (body: InterestDataDto) => {
 export const usePutMyInterst = () => {
   const queryClient = useQueryClient();
   const queryKey = [SHARED_QUERY_KEY.MY, SHARED_QUERY_KEY.MY_INTEREST] as const;
+  const recommendQueryKey = [
+    SHARED_QUERY_KEY.POSTS,
+    SHARED_QUERY_KEY.MY,
+    HOME_QUERY_KEY.POSTS_RECOMMEND,
+  ] as const;
 
   return useMutation({
     mutationFn: (body: InterestDataDto) => putMyInterst(body),
 
     onMutate: async (payload: InterestDataDto) => {
       await queryClient.cancelQueries({ queryKey });
+      await queryClient.cancelQueries({ queryKey: recommendQueryKey });
 
-      const previous = queryClient.getQueryData<InterestTypeDto[]>(queryKey);
+      const previous = queryClient.getQueryData<InterestTypeDto[]>(queryKey); //수정 전 관심사
+      const previousRecommend = queryClient.getQueryData(recommendQueryKey); //수정 전 추천글 캐시
       queryClient.setQueryData<InterestTypeDto[]>(queryKey, payload.interests);
 
       const { selectedTags } = useEditTagStore.getState();
       useEditTagStore.setState({
         originalTags: [...selectedTags],
       });
 
-      return { previous };
+      return { previous, previousRecommend };
     },
     onError: (_err, _payload, context) => {
       if (context?.previous) {
         queryClient.setQueryData(queryKey, context.previous);
       }
+      if (context?.previousRecommend) {
+        queryClient.setQueryData(recommendQueryKey, context.previousRecommend);
+      }
     },
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey });
+      queryClient.invalidateQueries({ queryKey: recommendQueryKey });
     },
   });
 };

src/features/mypage/model/useInfiniteActivityPosts.ts

@@ -2,6 +2,7 @@ import {
   getActivityPostList,
   type ActivityPostType,
 } from "@/shared/api/activity";
+import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes";
 import { MYPAGE_QUERY_KEY } from "../consts/queryKeys";
 import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys";
 import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
@@ -31,6 +32,7 @@ export const useInfiniteActivityPosts = (type: ActivityPostType, size = 20) => {
     },
 
     select: res => res.pages,
-    gcTime: 1000 * 60 * 5,
+    staleTime: QUERY_CACHE_TIME.POSTS.staleTime,
+    gcTime: QUERY_CACHE_TIME.POSTS.gcTime,
   });
 };

src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@/app/styles/index.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ThemeProvider } from "@/app/providers/ThemProvider.tsx";
 import { HelmetProvider } from "react-helmet-async";
 import App from "@/app/App";
@@ -14,6 +15,7 @@ createRoot(document.getElementById("root")!).render(
       <ThemeProvider>
         <QueryClientProvider client={queryClient}>
           <App />
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </ThemeProvider>
     </HelmetProvider>