👀 이슈

원래는 useQuery 를 사용하여, pagination fetch 를 진행하려했으나, api 문제로 인해 useInfiniteQuery 로 무한스크롤 구현 진행했다.

💭 제안

useInfinteQuery 를 사용한 이유는, data cache, 무한스크롤 데이터, 에러와 로딩처리 (나중에 suspense 사용에 용이), use 커스텀 훅으로, 구체적인 fetch 로직 감추기등

🛫 결과

const useFetchAllOfPosts = ({ limit }: UseFetchAllOfPostsParams) =>
  useInfiniteQuery({
    queryKey: ['posts', 'all'],
    queryFn: ({ pageParam = 1 }) =>
      getAllPostList({ limit, offset: pageParam }),
    getNextPageParam: (lastPage, _, lastPageParmas) =>
      lastPage.length < limit ? undefined : lastPageParmas + limit,
    initialPageParam: 0,
    select: (data) => data.pages.flatMap((page) => page),
    placeholderData: keepPreviousData,
  });

api

api 의 offset param 이 의미하는것은 어디서부터 데이터를 가져올것이냐라고 생각하면쉽다. 그 기준이 offset. api 의 limit param 은 몇개의 데이터를 가져올것이냐이다.

(예 : limit:5, offset:3 => 3번째 데이터부터 5개)

pageParam

offset 에 pageParam 을 전달해줬다,

pageParam 은 다음 data 가져올때 필요한 정보라고 보면된다. 여기서 limit 은 고정되어도되니까, offset 만 pageParam 을 할당했다.

getNextPageParam

getNextPageParam 콜백으로 서버에 데이터 가 더 있는지 확인해서 boolean 으로 반환해주면, 해당 훅을 사용하는 컴포넌트에서, hasNext 라는 필드로, 더 불러올지 여부에 대한 정보를 제공해준다.

여기서 데이터가 있는지 확인하는 방법으로,

마지막 데이터의 갯수 < limit 이면 pageParam 은 undefined 가 됨. 마지막 데이터의 갯수 >= limit 이면, lastPageParams + limit 으로 offset 을 설정함.