diff --git a/src/providers/QueryProvider.tsx b/src/providers/QueryProvider.tsx index 6210d8af..ad0b29e0 100644 --- a/src/providers/QueryProvider.tsx +++ b/src/providers/QueryProvider.tsx @@ -5,8 +5,19 @@ import { useState } from 'react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +const CONFIGURATION_TIME = 3 * 60 * 1000; + function QueryProvider({ children }: { children: React.ReactNode }) { - const [client] = useState(() => { return new QueryClient(); }); + const [client] = useState(() => { + return new QueryClient({ + defaultOptions: { + queries: { + staleTime: CONFIGURATION_TIME, + cacheTime: CONFIGURATION_TIME, + }, + }, + }); + }); return ( diff --git a/src/remote/queries/home/useProductList.ts b/src/remote/queries/home/useProductList.ts index 68f5bba4..e0771d2f 100644 --- a/src/remote/queries/home/useProductList.ts +++ b/src/remote/queries/home/useProductList.ts @@ -5,12 +5,20 @@ import { useInfiniteQuery } from '@tanstack/react-query'; import { HomeSortType } from '@components/home/filer-group/types/filterGroup.type'; import { getProductList } from '@remote/api/requests/home/home.get.api'; +const PAGE_SIZE = 10; + function useProductList(sortType: HomeSortType = 'recent-order') { const { data: productList, isLoading, fetchNextPage, isFetching, hasNextPage = false, } = useInfiniteQuery({ queryKey: ['productList', sortType], - queryFn: ({ pageParam = 0 }) => { return getProductList(Number(pageParam), 10, sortType); }, + queryFn: ({ pageParam = 0 }) => { + return getProductList( + Number(pageParam), + PAGE_SIZE, + sortType, + ); + }, getNextPageParam: (lastPage) => { return ( lastPage.value.last