[React-query] Pagination에 Prefetching 사용하기

현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 넘어가지 않은 듯한 상황이 벌어졌다.

 

첫 번째 시도

에서는 "QueryClient 설정 중에 keepPreviousData가 true여서 화면이 전환되는 느낌이 안 드는 걸까?"라는 생각으로 false로 바꿨다가 페이지를 바꿀 때마다 loading이 생겨서 바로 true로 바꿔버렸다.

 

keepPreviousData는 fetch된 데이터를 받아오기 전에 loading 대신 이전 데이터를 유지해 주는 소중한 속성이다.

// 주로 공통적으로 사용할 옵션을 입력해둘 수 있다.
const client = new QueryClient({
  defaultOptions: {
    queries: {
      // window가 focus 되었을 때 자동으로 refresh 해주는 옵션 > 비활성화
      refetchOnWindowFocus: false,
      // api 호출 실패 시 재요청 해주는 옵션 | fale리면 비활성화, true이면 무한으로 요청, Number를 주면 Number만큼 재요청
      retry: 2,
      // queryKey가 변경되어 api 재요청 시 새로운 데이터를 받아올 때까지 이전 데이터를 유지한다.
      keepPreviousData: true,
    },
  },
})

 

두 번째 시도

에서는 태초의 마음으로 구글링을 했는 데 아래 블로그에서 아래 문구를 보고 "이거다."라는 마음으로 테스트해 보니 아주 깔끔하게 해결됐다.

useQueryClient(), pregetchQuery 짱이다.

[React-Query] Pagination과 Prefetching

 

아래 글은 위 블로그의 마지막 부분에 있는 글인데 prefetching을 사용할 때 isFetching과 isLoading의 차이점을 설명을 기깔나게 해주셔서 prefetchQuery만 읽지말고 다 읽어보면 도움이 많이 될 것 같다.👍

 

결론적으로 깨달은 건 페이지네이션(pagination)을 구현할 때는 QueryClient에 keepPreviousData와 useQueryClient()의 prefetchQuery([queryKey, page], () => { queryFn })을 사용하면 로딩없이 부드럽게 전환되는 페이지네이션을 구현할 수 있다.⭐