diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts new file mode 100644 index 00000000..1a1443e9 --- /dev/null +++ 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 index 8df6bd57..22a91a0f 100644 --- 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>({ - 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 index f1ab1d08..92e4b2b4 100644 --- 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({ - 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 index c78e92f3..a0151623 100644 --- 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 index df14b27b..cab0110a 100644 --- 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 & { 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 index 9c4f84d9..4cd28c76 100644 --- 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);