데이터를 미리 가져와 캐시에 넣어서 사용자가 기다릴 필요없게 한다.

프리페칭 : 데이터를 캐시에 추가하며, 구성 할 수 있지만, 기본값으로 만료(stale) 상태이다.

<aside> ♻️ 데이터를 다시 가져오는 중에는 캐시에 있는 데이터를 이용해 앱에 나타낸다. ( 물론 캐시가 만료 되지 않았다는 가정하에)

</aside>

추후 사용자가 사용할 법한 모든 데이터에 프리페칭을 사용한다.

ex) 다수의 사용자가 웹사이트 방문 시 통계적으로 특정 탭을 누를 확률이 높다면, 해당 데이터를 미리 페칭한다.

prefetch 사용법

1. 일단 queryClient에서 불러온다.
2. useEffect를 통해 currentPage 가 바뀔때 다음페이지를 prefetch해서 캐시에 넣어둔다.
   • 현재 페이지에서 어떻게 다음 페이지 데이터를 fetch할지에 대한 구분을 useEffect에 넣어서 실행시켜준다.
3. 기존 useQuery의 option으로 keepPreviousData : true 로 설정해준다.

useQuery로 다음페이지를 fetch할때 없던 쿼리를 fetch하는게 아닌, 이전 페이지에서 캐시에 prefetch 해둔 데이터를 활용하여 보여준다.

useEffect(()=>{
    // 마지막 페이지에서는 prefetch 할 필요가 없음.
   if(currentPage < maxPostPage){
      const nextpage = currentPage + 1;
      queryClient.prefetchQuery(['posts', nextpage], ()=>fetchPosts(nextpage))
   }
  },[currentPage, queryClient])

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

keepPrevoisData : 쿼리키가 바뀔때도 지난 데이터를 유지해서, 캐시에 해당 데이터가 있도록 만들고 싶어요.

페이지를 넘길떄마다 쿼리가 쌓인다.

현재 페이지에 대한 쿼리만 활성 상태이다.