React Query를 사용하여 Pagination을 효율적으로 구현하기

Pagination 은 useQuery 와 prefetchQuery 를 사용하면 다음 페이지로 이동할 때 이미 다음 페이지의 데이터를 캐시하고 있어, 사용자가 대기하는 시간 없이 바로 화면에 렌더링 할 수 있는 좋은 기법이다.

keepPreviousData 옵션 활성화

keepPreviousData 옵션을 true 로 설정한 경우, 새로운 데이터가 요청되는 동안 성공적으로 가져온 마지막 데이터를 화면에 유지시켜준다.
➡ 유저의 입장에서 화면이 일관성 있게 유지되며 데이터만 변경되기 때문에 자연스러운 UI를 볼 수 있다.

  const queryInfo = useQuery(
    queries.posts.getPosts(page, limit).queryKey,
    getPostsApi,
    {
      staleTime: 5000, // fetch된 데이터 5초간 fresh 상태
      keepPreviousData: true, // 쿼리 키가 변경되어도 이전 데이터를 유지
    },
  );

PrefetchQuery 사용하기

prefetchQuery 은 이전 글을 참고하자
React-Query PrefetchQuery

useEffect(() => {
    if (data?.hasMore) {
      queryClient.prefetchQuery(["projects", page + 1], () =>
        fetchProjects(page + 1)
      );
    }
  }, [data, page, queryClient]);

page가 변경될 때 다음 데이터가 존재하는 경우 다음 페이지의 데이터를 prefetchQuery 통해 프리 패칭하여 캐시에 저장한다.

참고 : React-Query pagination