feat: useQuery 예시 코드 추가

TEAM-BEAT · Jul 16, 2024 · 44fee96 · 44fee96
1 parent 2c55da9
commit 44fee96
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/apis/domains/home/api.ts b/src/apis/domains/home/api.ts
@@ -5,6 +5,7 @@ import { AxiosResponse } from "axios";
 
 type HomeResponse = components["schemas"]["HomeResponse"];
 
+// 1. API 요청 함수 작성 및 타입 추가
 export const getAllScheduleList = async (): Promise<HomeResponse | null> => {
   try {
     const response: AxiosResponse<ApiResponseType<HomeResponse>> = await get("/main");

diff --git a/src/apis/domains/home/queries.ts b/src/apis/domains/home/queries.ts
@@ -5,9 +5,12 @@ const QUERY_KEY = {
   LIST: "list",
 };
 
+// 2. 쿼리 작성
 export const useGetAllScheduleList = () => {
   return useQuery({
     queryKey: [QUERY_KEY.LIST],
-    queryFn: () => getAllScheduleList(),
+    queryFn: () => getAllScheduleList(), // API 요청 함수
+    staleTime: 1000 * 60 * 60,
+    gcTime: 1000 * 60 * 60 * 24,
   });
 };
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -16,6 +16,7 @@ import { navigateAtom } from "@stores/navigate";
 import { useAtom } from "jotai";
 
 const Main = () => {
+  // 3. 훅 불러와서 사용
   const { data, isLoading } = useGetAllScheduleList();
 
   const [genre, setGenre] = useState("ALL");