프리페치

운이 좋다면 사용자가 무엇을 할지 충분히 파악하고 있어, 필요한 데이터를 실제로 필요해지기 전에 프리페치할 수 있습니다. 이 경우 queryClient.query 또는 queryClient.infiniteQuery를 사용하여 미리 캐시를 준비합니다:

import { noop } from '@tanstack/vue-query'

const prefetchTodos = async () => {
  // The results of this query will be cached like a normal query
  await queryClient
    .query({
      queryKey: ['todos'],
      queryFn: fetchTodos,
    })
    .catch(noop)
}

• 이 쿼리의 fresh 데이터가 이미 캐시에 있으면 데이터를 가져오지 않습니다
• 예를 들어 queryClient.query({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })와 같은 staleTime이 전달되고 데이터가 지정된 staleTime보다 오래된 경우 쿼리를 가져옵니다
• useQuery가 가져오기를 재시도하고 오류를 처리하므로, void를 사용하여 query의 Promise를 무시하고 .catch(noop)를 사용하여 오류를 무시할 수 있습니다.
• 캐시된 데이터가 있을 때 항상 이를 반환하려면 staleTime: 'static'을 사용하세요.
• 프리페치된 쿼리에 useQuery 인스턴스가 하나도 나타나지 않으면 gcTime에 지정된 시간이 지난 후 해당 쿼리가 삭제되고 가비지 컬렉션됩니다.

무한 쿼리 프리페치하기

Infinite Queries는 일반 Queries처럼 프리페치할 수 있습니다. 기본적으로 Query의 첫 페이지만 프리페치되어 지정된 QueryKey 아래에 저장됩니다. 둘 이상의 페이지를 프리페치하려면 pages 옵션을 사용할 수 있으며, 이 경우 getNextPageParam 함수도 제공해야 합니다:

import { noop } from '@tanstack/vue-query'

const prefetchProjects = async () => {
  // The results of this query will be cached like a normal query
  await queryClient
    .infiniteQuery({
      queryKey: ['projects'],
      queryFn: fetchProjects,
      initialPageParam: 0,
      getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
      pages: 3, // prefetch the first 3 pages
    })
    .catch(noop)
}

위 코드는 3개 페이지를 순서대로 프리페치하려고 시도하며, 프리페치할 다음 페이지를 결정하기 위해 각 페이지마다 getNextPageParam을 실행합니다. getNextPageParam이 undefined를 반환하면 프리페치를 중지합니다.