refactor: 쿼리키 상수화

woowacourse-teams · Aug 1, 2024 · 6071de9 · 6071de9
1 parent 025e152
commit 6071de9
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts
@@ -0,0 +1,10 @@
+export const QUERY_KEYS_MAP = {
+  travelogue: {
+    all: ["travelogues"],
+    detail: (id: string) => [...QUERY_KEYS_MAP.travelogue.all, id],
+  },
+  travelPlan: {
+    all: ["travel-plans"],
+    detail: (id: string) => [...QUERY_KEYS_MAP.travelPlan.all, id],
+  },
+};
diff --git a/frontend/src/queries/useGetTravelPlan.ts b/frontend/src/queries/useGetTravelPlan.ts
@@ -7,10 +7,11 @@ import { Travelogue } from "@type/domain/travelogue";
 import { authClient } from "@apis/client";
 
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
+import { QUERY_KEYS_MAP } from "@constants/queryKey";
 
 export const useGetTravelPlan = (id: string) => {
   return useQuery<AxiosResponse<Travelogue>>({
-    queryKey: [`travel-plans/${id}`],
+    queryKey: QUERY_KEYS_MAP.travelPlan.detail(id),
     queryFn: async () => authClient.get(API_ENDPOINT_MAP.travelPlan(Number(id))),
   });
 };
diff --git a/frontend/src/queries/useGetTravelogue.ts b/frontend/src/queries/useGetTravelogue.ts
@@ -5,10 +5,11 @@ import type { Travelogue } from "@type/domain/travelogue";
 import { client } from "@apis/client";
 
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
+import { QUERY_KEYS_MAP } from "@constants/queryKey";
 
 export const useGetTravelogue = (id: string) => {
   return useQuery<Travelogue>({
-    queryKey: [`travelogues/${id}`],
+    queryKey: QUERY_KEYS_MAP.travelogue.detail(id),
     queryFn: async () => {
       const { data } = await client.get(API_ENDPOINT_MAP.travelogue(Number(id)));
 

diff --git a/frontend/src/queries/useInfiniteTravelogues.ts b/frontend/src/queries/useInfiniteTravelogues.ts
@@ -3,6 +3,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { client } from "@apis/client";
 
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
+import { QUERY_KEYS_MAP } from "@constants/queryKey";
 
 export const getTravelogues = async ({ page, size }: { page: number; size: number }) => {
   try {
@@ -21,7 +22,7 @@ const useInfiniteTravelogues = () => {
   const DATA_LOAD_COUNT = 5;
 
   const { data, status, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: ["travelogues"],
+    queryKey: QUERY_KEYS_MAP.travelogue.all,
     queryFn: ({ pageParam = INITIAL_PAGE }) => {
       const page = pageParam;
       const size = DATA_LOAD_COUNT;

diff --git a/frontend/src/queries/usePostTravelPlan.ts b/frontend/src/queries/usePostTravelPlan.ts
@@ -9,6 +9,7 @@ import ApiError from "@apis/ApiError";
 import { authClient } from "@apis/client";
 
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
+import { QUERY_KEYS_MAP } from "@constants/queryKey";
 
 export const usePostTravelPlan = () => {
   const queryClient = useQueryClient();
@@ -21,7 +22,7 @@ export const usePostTravelPlan = () => {
     mutationFn: (travelPlan: Omit<TravelRegister, "thumbnail"> & { startDate: string }) =>
       authClient.post(API_ENDPOINT_MAP.travelPlans, travelPlan),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["travel-plans"] });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS_MAP.travelPlan.all });
     },
     onError: (error) => {
       alert(error.message);

diff --git a/frontend/src/queries/usePostTravelogue.ts b/frontend/src/queries/usePostTravelogue.ts
@@ -9,6 +9,7 @@ import ApiError from "@apis/ApiError";
 import { authClient } from "@apis/client";
 
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
+import { QUERY_KEYS_MAP } from "@constants/queryKey";
 
 export const usePostTravelogue = () => {
   const queryClient = useQueryClient();
@@ -21,7 +22,7 @@ export const usePostTravelogue = () => {
     mutationFn: (travelogue: TravelRegister) =>
       authClient.post(API_ENDPOINT_MAP.travelogues, travelogue),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["travelogues"] });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS_MAP.travelogue.all });
     },
     onError: (error) => {
       alert(error);