tanstack query 페이지네이션시 사용자 경험 개선하기, prefetching

 

tanstack query를 사용해서 데이터 패칭을 하는데 페이지네이션을 구현할 때, 다음 페이지로 이동을 할때마다 로딩 화면이 살짝 보이는 것을 개선하기 위해서는 prefetching 을 사용하면 된다. 

 

prefetching을 사용하면 말 그대로 데이터를 미리 가져와서 캐시에 넣고 사용자가 로딩 화면을 보지 않도록 할 수 있다. 

 

---

 

prefetchQuery는 QueryClient 의 메소드이고, useQueryClient 훅을 써서 그 QueryClient를 가져올 수 있다. 

 

상태 업데이트가 비동기적이라 업데이트가 이미 적용되었는지 정확하게 알 수 없기 때문에 다음 페이지 버튼의 클릭 이벤트에서 prefetching이 실행되도록 하지 않는게 좋다. 

그래서 현재 페이지가 변경될 때마다 useEffect를 사용해서 prefetching되도록 한다. 

 

useEffect(() => {
    if (currentPage < maxPostPage) {
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery({
        queryKey: ["posts", nextPage],
        queryFn: () => fetchPosts(nextPage),
      });
    }
  }, [currentPage, queryClient]);

 

 

전체 코드

import { useState, useEffect } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";

export function Posts() {
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedPost, setSelectedPost] = useState(null);
  const queryClient = useQueryClient();

  useEffect(() => {
    if (currentPage < maxPostPage) {
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery({
        queryKey: ["posts", nextPage],
        queryFn: () => fetchPosts(nextPage),
      });
    }
  }, [currentPage, queryClient]);

  const { data, isError, error, isLoading } = useQuery({
    queryKey: ["posts", currentPage],
    queryFn: () => fetchPosts(currentPage),
    staleTime: 2000,
  });

  if (isLoading) {
    return <h3>Loading...</h3>;
  }

  if (isError) {
    return (
      <>
        <h3>Error fetching data</h3>
        <p>{error.toString()}</p>
      </>
    );
  }
  
  .
  .
  .

 

 

참고 링크)

https://tanstack.com/query/latest/docs/framework/react/guides/prefetching#prefetchquery--prefetchinfinitequery

Prefetching & Router Integration | TanStack Query React Docs