이전에 react-observer-intersection로 무한스크롤을 구현한적이 있었는데요, 메인 프로젝트에서도 무한스크롤을 구현해야했기 때문에 적용예시 코드를 찾아보았습니다. 인피니티 쿼리로 무한스크롤 구현하려고 하니, 막상 막막했습니다.
@tanstack/query-example-react-load-more-infinite-scroll
Synced template from GitHub @tanstack/query at /examples/react/load-more-infinite-scroll
codesandbox.io
공식문서에서도 찾아보니, 옵저버를 사용해서 구현하고 있더라구요..ㅎㅎ; 이러면 말이 쉽지 싶었습니다 ^^;;
useInView를 사용하고, 마지막 div가 보이면 다음 페이지의 데이터를 요청해서 보여지게끔 하는 코드를 구현하였습니다.
실제 프로젝트 코드
const {
data: hostData,
fetchNextPage: fetchNextPageHost,
isSuccess: hostIsSucess,
isError: hostIsError,
isLoading: hostIsLoading,
} = useInfiniteQuery({
queryKey: ['hostFeed'],
queryFn: ({ pageParam = 0 }) => {
return getHostFeedList(
`${SERVER_URL}/feeds/list?page=${pageParam}&size=10`,
accessToken,
);
},
staleTime: 600000,
cacheTime: 600000,
refetchOnMount: false,
getNextPageParam: (_, allPages) => {
const len = allPages.length;
const totalLength = allPages.length;
return allPages[totalLength - 1].length === 0 ? undefined : len;
},
enabled: !!accessToken,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['contextApi'] });
},
});