TIL 220713

무한스크롤 (react-query)

pageParam

useInfiniteQuery 가 현재 어떤 페이지에 있는지를 확인할 수 있는 파라미터 값.
pageParam은 queryFn의 파라미터 값에서 확인 할 수 있다.

getNextPageParam

다음 api를 요청할 때 사용될 pageParam값을 정할 수 있다.

getNextPageParam: (lastPage) =>
        !lastPage.isLast ? lastPage.nextPage : undefined

// lastPage.nextPage 만 넣으면 값이 없는데 정말 무 한 스크롤이 되어버림 

파라미터 값 (lastPage, allPage)

lastPage : 호출된 가장 마지막에 있는 페이지 데이터를 의미
allPage : 호출된 모든 페이지 데이터를 의미.

Return 값을 정할 수 있는데 다음 페이지가 호출될 때 pageParam값으로 사용된다.

fetchNextPage

다음 페이지의 데이터를 호출 할 때 사용
useInfiniteQuery 를 이용해 호출되는 데이터들은 page별로 배열의 요소에 담기게 된다.

const fetchPostList = async (pageParam) => {
  const res = await instance.get(`/api/allpost?page=${pageParam}`);
  const { postList, isLast } = res.data;
  return { postList, nextPage: pageParam + 1, isLast };
};

const { data, status, fetchNextPage, isFetchingNextPage } = useInfiniteQuery(
    "postList",
    ({ pageParam = 0 }) => fetchPostList(pageParam),
    {
      refetchOnWindowFocus: false,
      getNextPageParam: (lastPage) =>
        !lastPage.isLast ? lastPage.nextPage : undefined,
    }
  );

  useEffect(() => {
    if (inView) fetchNextPage();
  }, [fetchNextPage, inView]);

const { ref, inView } = useInView();
{isFetchingNextPage ? <Loading /> : <div ref={ref}></div>}
//확인할 부분에 ref할당하기 

// ref가 화면에 나타나면 inView는 true, 아니면 false를 반환한다.