● [Main-Project] 리액트 infiniteQuery로 무한스크롤 구현하기

이전에 react-observer-intersection로 무한스크롤을 구현한적이 있었는데요, 메인 프로젝트에서도 무한스크롤을 구현해야했기 때문에 적용예시 코드를 찾아보았습니다. 인피니티 쿼리로 무한스크롤 구현하려고 하니, 막상 막막했습니다.

https://codesandbox.io/p/sandbox/github/tanstack/query/tree/main/examples/react/load-more-infinite-scroll?embed=1 

@tanstack/query-example-react-load-more-infinite-scroll

공식문서에서도 찾아보니, 옵저버를 사용해서 구현하고 있더라구요..ㅎㅎ; 이러면 말이 쉽지 싶었습니다 ^^;; 

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'] });
    },
  });