useInfiniteQuery 질문 합니다.

[황혜진]

안녕하세요!
react query를 사용해서 infinite Scroll을 구현하려고 하는데, getNextPageParam 의 lastPage가 object로 들어와 pageParam이 NaN이 됩니다!
어떤 부분을 수정해야 할지 잘 모르겠어서 질문 드립니다!
그리고 lastPage의 타입이 인텔리센스에서 AxiosResponse<any, any>라고 나와 동일하게 적용하였는데 number가 아닌 값에 +를 할수 없다. 라고 오류가 발생하고,
number로 지정을 하면 axios.get() 부분에서 타입오류가 발생하여 getNextPageParam parameter 타입적용도 알려주시면 좋을 것 같습니다.

감사합니다!

//useInfiniteQuery
const useFetchNews = () =>
useInfiniteQuery(
 ["news"],
({ pageParam = 0 }: QueryFunctionContext) =>
axios.get(`${API_ENDPOINT}`, {
params: { limit: 10, offset: pageParam },
}),
{
getNextPageParam: (lastPage: any) => {
console.log(lastPage);
return lastPage + 1 || undefined;
},
},
 );

// Component
useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(callback, options);
observer.observe(ref.current);
return () => observer.disconnect();
}, [ref, options, callback]);

return ref;
};

const { data, hasNextPage, isFetching, fetchNextPage } = useFetchNews();

const news = useMemo(
() => (data ? data.pages.flatMap(({ data }) => data.results) : []),
 [data],
 );

const ref = useIntersect(async (entry: any, observer: any) => {
observer.unobserve(entry.target);
if (hasNextPage && !isFetching) {
fetchNextPage();
}
});

[codingapple]

getNextPageParam: (lastPage, pages) => {
      if (!lastPage.isLast) return lastPage.nextPage;
      return undefined;
    },
이렇게 쓰라는거같군요 타입은 안써봐서 모르겠습니다 타입들어간 버전을 찾아봅시다

[글쓴이]

글