개발자
useInfiniteQuery 사용해 무한스크롤 구현 중 궁금한 점이 있습니다.
응답값에 page로 구분할 수 있는 데이터들로 구현할땐 어렵지 않았는데, 이렇게 배열 묶음으로 응답받는 경우에는 어떻게 무한스크롤 구현을 할 수 있을까요?.. 도저히 머리를 굴려보아도 해답을 못찾겠습니다.... api 응답값을 수정하는게 불가능한 상황인데 그럼 이 엔드포인트로는 구현하기가 어려울까요?..
1import { useInfiniteQuery } from "@tanstack/react-query";
2import axios from "axios";
3
4const API = process.env.REACT_APP_API;
5
6const fetchAllWord = async () => {
7 const response = await axios.get(`${API}/word/non-member`);
8 return response.data;
9};
10
11const useGetAllWordData = () => {
12 return useInfiniteQuery({
13 queryKey: ['무한스크롤 데이터'],
14 queryFn: fetchAllWord,
15 getNextPageParam: (lastPage, pages) => {
16 const nextPage = pages.length + 1;
17 return nextPage <= lastPage.total_pages ? nextPage : undefined;
18 },
19 });
20};
21
22export default useGetAllWordData;
답변 1
api가 어떻게 구현되었냐에 따라 다르겠죠. 만약 1페이지에 20개씩 내려준다면 20개 미만으로 올 때는 다음 페이지를 없는 걸로 간주하거나, 다음 페이지를 일단 요청해보고 0개나 에러가 오면 없는 걸로 처리하거나
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
1월 17일
무한 스크롤을 구현하기 위해서 `useInfiniteQuery`의 `getNextPageParam`함수에 넘겨주는 값이 중요합니다. `getNextPageParam`은 마지막 페이지의 데이터와 모든 페이지의 배열을 인자로 받아 다음 페이지 값을 반환하는 함수입니다. 현재 코드에서는 모든 페이지들의 총 길이(`pages.length`)를 다음 페이지 값으로 사용하는데, 이는 잘못된 접근일 수 있습니다. 왜냐하면 이 방식은 각 응답이 한 페이지만 가져오는 상황을 가정하고 있기 때문입니다. 배열 묶음으로 응답을 받는 경우라면, 아래와 같이 마지막 요소의 인덱스 또는 고유 식별자 등을 다음 페이지 값으로 사용할 수 있습니다. ```javascript ... getNextPageParam: (lastPage, pages) => { const lastItem = lastPage[lastPage.length-1]; return lastItem?.id; // 혹은 어떤 특정 값을 반환 }, ... ``` 위 예시에서 `lastItem.id`가 다음 API 호출에서 사용될 'cursor' 역할을 하는 것입니다. 서버가 cursor 기반 pagination(커서 기반 페이징)을 지원한다면, 이런 방식으로 구현해볼 수 있습니다. 하지만 만약 API가 cursor 기반 pagination을 지원하지 않거나 요소에 고유한 식별자가 없는 경우라면, 현재의 엔드포인트로는 무한스크롤 구현이 어려울 수 있습니다. 이런 경우 API 응답을 수정하는 것 외에는 대안이 많지 않을 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!