Doo can do it

무한스크롤 기능을 구현하면서 문제가 있었던 부분을 남겨보려고 한다.우선 tanstack-query 공식문서에서 설명하는 useInfiniteQuery의 사용법은 위와 같다.그리고 나서 내가 구현하려고 했던 코드를 적어보면 아래와 같다. export const productQuery = { useGets : function() { return useInfiniteQuery, Error>({ queryKey: ["products"], queryFn: ({ pageParam = 1 }) => productApi.gets(String(pageParam)), getNextPageParam: (lastPage..

프로젝트에 무한스크롤을 구현하기 위해 필요한 것을 찾다가 tanstack-query의 useInfiniteQuery 에 대해 공부해봤다.사용법은 평소 조회를 할 때 사용하는 useQuery와 사용법이 비슷하지만 다른 차이점도 존재하였다.우선 기존에 사용했던 useQuery와의 차이점을 비교해보면 아래와 같다.useQuery단일 쿼리를 수행하여 데이터 패칭특정 데이터를 가지고 온 뒤, 그 데이터를 캐싱하여 재사용(queryKey)목록조회, 유저정보 등 사용함useInfiniteQueryuseQuery에서 추가적으로 페이지네이션이나 무한스크롤을 지원특정 데이터를 여러 페이지에 걸쳐서 가져오고, 사용자가 더 많은 데이터 요청할 수 있도록 할 때 사용목록리스트, 스크롤 할때 추가 데이터 보여주기에 적합예제ret..