[Today I Learned] 1월 2주차 day4

suwoncityboyyy·2023년 1월 12일
0

useInfiniteQuery

파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할때 사용 이라고 나와있다.
Infinite scroll 을 적용하기 위해 사용한다.

  • data : infinite query 데이터가 담겨있는 객체입니다.
  • fetchNextPage와 getNextPageParam를 사용할 수 있습니다.
  • getNextPageParam 함수가 undefined가 아닌 다른 값을 반환하면 hasNextPage는 true입니다.
  • getBookData는 서버에서 가져올 함수이다.
  const {
    data: Data,
    isLoading: isLoadingBD,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery("Movies", getBookData, {  // querykey , queryFN 형태로 지정
  
    getNextPageParam: (lastPage) => {
      if (lastPage.page < lastPage.total_pages) {
        return lastPage.page + 1;
      }
    },
  });
 const fetchMore = async () => {
    // true 일때 fetchNextPage 호출
    if (hasNextPage) {
      await fetchNextPage();
    }
  };

[참고자료]

useInfiniteQuery
reactquery Docs

profile
주니어 개발자 기술노트

0개의 댓글