[React] React Query의useInfiniteQuery에서 무한 스크롤
10504 단어 상태 관리무한 스크롤React프런트엔드react-query
React Query의
useInfiniteQuery()
에서 무한 스크롤을 구현해 문장으로 정리했다."React Query가 뭐예요?"가능하다면 지난번 보도를 보십시오.
이른바 useInfiniteQuery
useInfiniteQuery()
일부 데이터가 되돌아오는 다음 조회를 추적합니다.반환
useQuery()
data
의 내용은 다르고 pages
와 pageParams
두 속성을 포함하는 대상이다.pages
는 검색 결과를 수조로 되돌려주고, pageParams
는 이미 실행된 검색 키를 수조로 되돌려준다.위는
pages
, 아래는pageParams
의 결과의 예이다.또한
useInfiniteQuery()
의 기술 예는 다음과 같다. const {
data,
fetchNextPage,
hasNextPage,
isLoading,
isFetching,
isError,
error,
} = useInfiniteQuery(
'sw-people',
({ pageParam = initialUrl }) => fetchUrl(pageParam),
{
getNextPageParam: (lastPage) => lastPage.next || undefined,
}
);
pageParam
에서 초기값defaultUrl
으로 설정되었으나 옵션getNextPageParam
을 통해 업데이트되었습니다.이상의 예에서 최신 페이지의 데이터
lastPage
중 다음pageParam
을 lastPage.next || undefined
로 설정하고 allPages
파라미터를 사용할 수 있다.이렇게 하면
pageParam
의 현재 값이 React Query에서 관리됩니다.또한
useInfiniteQuery()
되돌아오는 대상 속성 중useQuery()
에 없는 다음과 같은 속성이 존재한다.fetchNextPage
: 다음 페이지의 데이터를 되찾을 수 있는 함수hasNextPage
: getNextPageParam
가 업데이트pageParam
되면 true
(undefined시false
isFetchingNextPage
: fetchNextPage
에서 다음 페이지의 데이터를 받았을 때true
되돌아오기(loading 로고에 사용)getNextPageParam
업데이트 pageParam
hasNextPage
인 경우 이벤트(스크롤 또는 버튼 클릭)로 수행true
2→3 반복
fetchNextPage
까지hasNextPage
undefined
및 React Infinite Scroller를 사용하여 무한 스크롤을 수행합니다.InfinitePeople.jsx
import InfiniteScroll from 'react-infinite-scroller';
import { useInfiniteQuery } from 'react-query';
import { Person } from './Person';
const initialUrl = 'https://swapi.dev/api/people/';
const fetchUrl = async (url) => {
const response = await fetch(url);
return response.json();
};
export function InfinitePeople() {
const {
data,
fetchNextPage,
hasNextPage,
isLoading,
isFetching,
isError,
error,
} = useInfiniteQuery(
'sw-people',
({ pageParam = initialUrl }) => fetchUrl(pageParam),
{
getNextPageParam: (lastPage) => lastPage.next || undefined,
}
);
if (isLoading) return <div className="loading">Loading...</div>;
if (isError) return <div>Error! {error.toString()}</div>;
return (
<>
{isFetching && <div className="loading">Loading...</div>}
<InfiniteScroll loadMore={fetchNextPage} hasMore={hasNextPage}>
{data.pages.map((pageData) => {
return pageData.results.map((person) => {
return (
<Person
key={person.name}
name={person.name}
hairColor={person.hair_color}
eyeColor={person.eye_color}
/>
);
});
})}
</InfiniteScroll>
</>
);
}
useInfiniteQuery()
에서 react-infinite-scroll
를 가져온 후 InfiniteScroll
구성 요소를 봉합니다.Person
속성loadMore
을 fetchNextPage
속성hasMore
으로 설정하면 다음 페이지의 데이터 추출을 제어할 수 있습니다.참고 자료
Reference
이 문제에 관하여([React] React Query의useInfiniteQuery에서 무한 스크롤), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/suzuki0430/items/6afa25b28d96612aa429텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)