React React-query InfiniteQuery 예제 ∞

React 쿼리의 InfiniteQuery 사용에 대한 한글로 된 예시가 많은것 같지 않아 작성해보려 합니다.

 

React-query의 InfiniteQuery를 사용하면 다음 page의 데이터를 간편하게 불러올 수 있습니다.

준비해줘야 할것은 pageParam을 입력받는 api 요청 함수, getNextPageParam에서 pageParam을 올려주면 됩니다.

 

keepPreviousData 옵션을 이용하면 다음 데이터가 fetching 되기 전까지 이전 데이터를 유지할 수 있고

getPreviousPageParam와 fetchPreviousPage를 이용하면 이전 페이지의 데이터를 가져올 수 도 있습니다.

정말 다양한 옵션과 쓰임새가 있을 수 있는데 기본이 가장 중요하므로 기본만 구현된 예제를 작성해 보려 합니다.

 

---

 

 

InifniteData의 정보는 pages에 담겨있습니다. 

jsx를 리턴하는 부분에서 map의 사용이 너무 많아져서 Array.flatMap을 이용하여 1차 depth의 평탄화를 시켜준 다음 평탄화된 배열은 map으로 순회하였습니다.

 

 

fetchNextPage에 { pageParam: customNumber } 를 인자로 넘겨준다면 원하는 페이지를 요청해주게 됩니다.

물론 이렇게 되었을 경우 백엔드 쪽에서 받아서 처리해주어야 합니다.

[skip, take], [offset, limit]과 같은 키워드로 검색하여 sql 혹은 Orm을 이용하면 백엔드에서 수월하게 처리할 수 있을 겁니다.

 

 

---

 

keepPreviousData는 paginated Query를 더 잘 사용하기 위한 도구입니다.

keepPreviousData를 설정함으로써 아래와 같은 기대효과를 가질 수 있습니다.

• 쿼리 키가 변경되었을 지라도 새 데이터를 요청하는 동안 가장 최근에 요청에 성공한 데이터에 접근이 가능합니다.
• 새로운 데이터가 도착하면 이전의 데이터가 원할하게 교체되어 표시가 됩니다.
• isPreviousData가 현재 어떤 데이터가 제공되고 있는지를 알 수 있게 해줍니다.

const {
     isLoading,
     isError,
     error,
     data,
     isFetching,
     isPreviousData,
   } = useQuery(['projects', page], () => fetchProjects(page), { keepPreviousData : true })

 

<button
    onClick={() => {
        if (!isPreviousData && data.hasMore) {
         	setPage(old => old + 1)
        }
    }}
    // Disable the Next Page button until we know a next page is available
	disabled={isPreviousData || !data?.hasMore}
>

---

 

출처: https://react-query.tanstack.com/guides/infinite-queries

Infinite Queries

https://react-query.tanstack.com/guides/paginated-queries#better-paginated-queries-with-keeppreviousdata

Paginated / Lagged Queries