👀 이슈
원래는 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 을 설정함.
마지막 데이터의 갯수가 limit 보다 작다는것은 더이상 불러올 데이터가 없다는것을 의미함.
