useInfiniteQuery는 데이터를 지속적으로 검색하는 방법입니다. (예: 페이징)
간단하게 사용하는 방법을 알아보겠습니다.
const apiCallMethod = async () => {
// api call code
}
const { data, fetchNextPage, refetch, hasNextPage, isStale } =
useInfiniteQuery(
queryKey,
({ pageParam = 1 }) => apiCallMethod(pageParam), //queryFn
{
getNextPageParam: (lastPage, allPages) => { }
staleTime: 10 * 1000;
cacheTime: 10 * 1000;
}// 옵션
querKey: 데이터를 가져올 때 사용되는 고유 식별 쿼리 키입니다. 이 쿼리 키를 사용하여 데이터를 캐시하고 캐시된 데이터를 검색할 수 있습니다. 배열 또는 문자열로 지정할 수 있습니다.
인기글
queryFn: queryKey를 이용하여 api를 호출하는 함수입니다.
{
getNextPageParam: 다음 페이지를 queryFn 함수에 전달하는 역할을 합니다. 두 번째 매개변수입니다.
데이터가 더 이상 존재하지 않으면 정의되지 않은 상태로 전달하십시오.
더 이상 로드할 데이터가 없다고 판단하고 더 이상 로드할 데이터가 없습니다.
staleTime: 데이터 유효 시간 설정, 시간을 ms로 지정하면 데이터 유효 시간입니다. staletime이 경과하기 전에 동일한 페이지를 새로 고치면 api가 호출되지 않으므로 이를 염두에 두고 설계하십시오.
cacheTime: 캐시된 데이터의 유효 시간을 설정합니다. useInfiniteQuery의 반환 값 중 하나인 data는 캐시된 데이터입니다.
// 반환 값
data: API 호출로 받은 데이터를 캐싱하여 data에 저장합니다.
fetchNextPage: 데이터의 다음 페이지를 가져와야 할 때 호출되는 메서드입니다.
hasNextPage: 데이터를 다음 페이지로 로드할지 여부.
refetch: API를 다시 호출하여 데이터를 가져오는 방식.
isStale: 데이터가 오래되었는지 여부.과거 거짓이면 참
제가 틀렸다면 댓글로 지적해주세요!