tanstackquery [useInfiniteQuery]

프로젝트에 무한스크롤을 구현하기 위해 필요한 것을 찾다가 tanstack-query의 useInfiniteQuery 에 대해 공부해봤다.
사용법은 평소 조회를 할 때 사용하는 useQuery와 사용법이 비슷하지만 다른 차이점도 존재하였다.

우선 기존에 사용했던 useQuery와의 차이점을 비교해보면 아래와 같다.

• useQuery

1. 단일 쿼리를 수행하여 데이터 패칭
2. 특정 데이터를 가지고 온 뒤, 그 데이터를 캐싱하여 재사용(queryKey)
3. 목록조회, 유저정보 등 사용함

• useInfiniteQuery

1. useQuery에서 추가적으로 페이지네이션이나 무한스크롤을 지원
2. 특정 데이터를 여러 페이지에 걸쳐서 가져오고, 사용자가 더 많은 데이터 요청할 수 있도록 할 때 사용
3. 목록리스트, 스크롤 할때 추가 데이터 보여주기에 적합

예제

return useInfiniteQuery({
    queryKey : ['쿼리 키']
    queryFn : 비동기 함수
    initialPageParam : 초기 pageParam 설정 (필수)
    getNextPageParam : (lastPage, pages) => lastPage.nestCursor (필수)
})

사용방법은 위와 같다. 그 외에도 다양한 옵션들이 있지만 필요한 옵션들이 있다만 공식문서를 참조하는것이 좋을 것 같다.
그리고 나서 무한스크롤을 구현하려고 하는 곳에서 보여주려고 하는 데이터의 갯수를 생각하고 계산 한 뒤 view 에 보여주면 될 것 같다.