Prefetching?

pre+fetch 의 합성어
사용자가 데이터가 필요하기 전에 보여줄 데이터를 미리 가져올 수 있도록 알 수 있습니다.

주로 server side 에서 데이터를 미리 받아오거나, 화면 전환시 컴포넌트 마운트 전에 데이터를 미리 받아오기 위해 사용합니다.

prefetchQuery method를 사용하여 캐시에 넣을 쿼리 결과를 미리 가져 올 수 있습니다.
➡ loading 없이 바로 임시 데이터를 보여줄 수 있습니다.

사용자에게 편리한 UX를 보여줄 수 있다!

const getPostsApi = async (
  ctx: QueryFunctionContext<getPostListQuery["queryKey"]>,
): Promise<Post[]> => {
  const [, , { page, limit }] = ctx.queryKey;
  const response = await axiosClient.get<Post[]>(
    `${BASE_URL}/posts`,
    {
      params: { page: page, limit: limit },
    },
  );
  return response.data;
};


const prefetchTodos = async () => {
  const queryClient = useQueryClient();
  // ✅ The results of this query will be cached like a normal query
  await queryClient.prefetchQuery(
    queries.posts.getPosts(page, limit).queryKey
    getPostsApi,
  )
}

• 쿼리에 대한 데이터가 이미 캐시에 있으며, 무효화되지 않는 경우 데이터를 가져오지 않습니다.
  ➡ 지정된 staleTime 보다 오래된 경우 쿼리를 가져 옵니다.

const prefetchTodos = async () => {  
  const queryClient = useQueryClient();
  await queryClient.prefetchQuery(
    queries.posts.getPosts(page, limit).queryKey
    getPostsApi,
    {
    	staleTime: 5000
    }
  )
}

• useQuery prefetch 된 쿼리에 대한 인스턴스가 없다면, 지정된 시간 이후 삭제되어 가비지에 수집됩니다.