just in time 하게 data를 fetching 해오는 기술. 유저가 스크롤 끝에 다다르면 그때 fetching 을 반복. different type of pagination이라 볼수잇음

useInfiniteQuery

• pagination
  • track current page in component state
  • new query updates page number
• useInfiniteQuery tracks next query
  • next query is returned as part of the data
  • object를 가질건데
• 옵션
  • getNextPageParam: (lastPage, allPages)
    • Updates pageParam
    • Might use all of the pages of data
    • 우리는 last page of data만 볼 것임 (특히 next property에서)

useInfiniteQuery가 반환하는 object 속성들

• fetchNextPage
  • 데이터를 더 불러와야할때 call하는 함수
• hasNextPage
  • Based on return value of getNextPageParam
  • If undefined, 더이상 데이터 없음
• isFetchingNextPage
  • for displaying a loading spinner
  • isFetching 과 isFetchingNextPage 의 구분.

플로우

컴포넌트가 mount되면 - data : undefined임

const {data} = useInfiniteQuery(...)

→ fetch first page —> data.pages[0]

// pageParam : defaultURL
useInfiniteQuery({
	queryFn: ({ pageParam = defaultUrl }) => ...
	getNextPageParam : (lastPage, allPages) => ...
})

→ getNextPageParam Update pageParam

page param을 업데이트 함.