useSWRInfinite 적용하기(23.11.10)

#현업 #SWR

참고

SWR 공식문서 : https://swr.vercel.app/ko/docs/pagination#useswrinfinite

SWR 심층탐구 : https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC-useSWRInfinite

function useInfinityDiscoverTagPost(tagId: number) {
  const { data, setSize, isValidating } = useSWRInfinite<
    Response,
    ApiError
  >((pageIndex, prevData) => {
    // pageIndex는 0 부터 시작한다.
    const query = getQueryString({ tagId, size: 20, page: pageIndex + 1 });

    // 이전 데이터들을 load 했고 다음 페이지가 없을 경우 null을 리턴한다.
    if (prevData && !prevData.hasNext) {
      return null;
    }

    // 첫 페이지일 때(prevData가 null) 다음 페이지가 있을 때 key를 리턴한다.
    return `/api/v1/discover/tag/posts?${query}`;
  });

  return {
    // tagPosts: data가 [{ paging, contents }, { paging, contents }, ...] 형식이기 때문에 
    // flatMap 으로 컴포넌트에서 사용할 데이터로 가공한다.
    tagPosts: data?.flatMap(({ contents }) => contents) || [],
    loading: isValidating,
    // setSize는 pageIndex를 업데이트 한다.
    setSize,
  };
}