[react-query] useInfiniteQuery 사용법.

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 함수에 전달하는 역할을 한다.
 만약 더이상 데이터가 존재하지 않다면 undefined를 전달하게 되면
더이상 불러올 데이터가 없다 판단하여 더이상 데이터를 불러오지 않게 된다.
 
staleTime: 데이터 유효시간 설정,  ms 단위로 시간을 지정하게 되면 데이터에 유효시간이 부여되는 셈이다.  staletime이 지나지 않은 상태에서 다른 페이지로 이동했다가 다시 같은 페이지로 이동하게 되면 api 호출이 되지 않으니 이 점 유의해서 설계해야한다.
 
cacheTime: 캐싱된 데이터의 유효시간을 설정한다. useInfiniteQuery 의 반환값중 하나인 data가 캐싱된 데이터이다.
 
// 반환값
 
data : api 호출되어 전달받은 데이터가 캐싱되어서 data에 저장된다.
 
fetchNextPage: 다음 페이지의 데이터를 가져와야할때 호출하는 메소드.
hasNextPage: 다음 페이지로 데이터를 불러와야하는지 여부. true라면 getNextPageParam이 호출된다.
refetch: api를 재호출하여 데이터를 가져오는 메소드.
isStale: 데이터의 유효기간이 지났는지 여부. 안지났으면 false 지났으면 true
 
혹시나 제가 틀린 부분이 있다면 댓글로 지적 부탁드립니다!