useInfiniteQuery
- React Query에서 제공하는 hooks
- Infinite Scroll 기법을 적용해서 데이터를 보여주는데 이용할 수 있다.
Options
useQuery에서 부가적인 옵션이 더 추가된 형태로 옵션은 다음과 같이 존재한다.
getNextPageParam: (lastPage, allPages) => unknow | undefined
- 데이터의 마지막 페이지와 모든 페이지의 전체 배열을 받는다.
- 마지막 페이지에 대한 단일 변수를 반환하거나 이후 페이지가 없는 경우 undefined를 반환해야 한다.
getPreviousPageParam: (firstPage, allPages) => unknown | undefined
- 데이터의 첫 페이지와 모든 페이지의 전체 배열을 받는다.
- 마찬가지로 첫 페이지에 대한 단일 변수 혹은 이전 페이지가 없는 경우 undefined를 반환해야 한다.
반환 값(Returns)
마찬가지로 useQuery에서 일부 추가된 형태로 다음과 같이 있다.
data.pages: TData[]
: 모든 페이지를 포함하는 배열
data.pageParams: unknown[]
: 모든 페이지의 Params를 포함하고 있는 배열
isFetchingNexPage: boolean
: fetchNextPage로 다음 페이지를 가져오는 동안 true 값을 갖는다.
isFetchingPreviousPage: boolean
: fetchPreviousPage로 이전 페이지를 가져오는 동안 true 값을 갖는다.
fetchNextPage: (option?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
- 결과에 대한 다음 페이지를 가져온다.
options.pageParam: unknown
options.cancelRefetch: boolean
- true(기본 값) : fetchNextPage를 반복적으로 호출하면 이전 호출이 해결되었는지 여부 관계 없이 매번 fetchPage가 호출된다.
- false : fetchNextPage를 반복적으로 호출해도 첫 번째 호출이 해결될 때까지 fetchPage 호출을 수행하지 않는다.
fetchPreviousPage: (option?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
- 결과에 대한 이전 페이지를 가져온다.
options.pageParam: unknown
, options.cancelRefetch: boolean
은 fetchNextPage
와 같은 기능을 수행한다.
hasNexPage: boolean
: 가져올 다음 페이지가 있으면 true가 되며, getNextPageParam 옵션을 통해 제어된다.
hasPreviousPage: boolean
: 가져올 이전 페이지가 있으면 true가 되며, getPreviousPageParam 옵션을 통해 제어된다.
기업 과제
- 페이지에 대한 무한 스크롤을 구현하는 방법은 여러가지 있지만, 현재 진행하고 있는 기업과제에서 React Query를 사용하고 있어서, 그에 관련한 방법을 고민하고 있다.
- 검색 기능에서 이미 useQuery를 사용하고 있기 때문에, 구조 분해 할당으로 변수명들이 충돌되고 있다. 따로 파일을 분리해야 할지 고민하고 있지만, 어떻게 분리해야할지 아직 감이 잘 안온다.
- useInfiniteQuery를 사용하면 API의 중첩 구조가 pageParam와 pages가 더 생기면서 타입 정의 등 많은 부분에서 에러사항이 발생하고 있지만 배열의 중첩 구조가 늘어난 것이기 때문에 데이터를 console로 확인하고 map과 flat을 이용해서 문제를 해결했다.
- 현재는 getNextPage option을 이용해서 다음 페이지에 대한 부분을 처리하고 있지만 타입 지정에 문제가 있는지 문제가 잘 해결되지 않고 있다.
- 맡은 기능에 대해 구현을 잘 수행하고 있지 못해서 팀원들에게 미안했다. 하지만 이렇게 무언가 도전하고 부딪히지 않으면 성장할 수 없을거라는 생각에 긍정적인 생각으로 버티는 하루였다.