[TanStakQuery] Prefetching

운이 좋다면 사용자가 필요한 데이터를 필요로 하기 전에 prefetch할 수 있는 방법을 충분히 알고 있을 수도 있습니다! 이 경우 prefetchQuery 메서드를 사용하여 쿼리 결과를 미리 가져와 캐시에 저장할 수 있습니다:

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

• 이 쿼리에 대한 데이터가 이미 캐시에 있고 유효한 경우 데이터가 fetched되지 않습니다.
• 만약 staleTime이 전달되고 데이터가 지정된 staleTime보다 오래된 경우(예: prefetchQuery({queryKey: ['todos'], queryFn: fn, staleTime: 5000 })) 쿼리가 fetched됩니다.
• 미리 가져온 쿼리에 대해 useQuery 인스턴스가 나타나지 않으면 cacheTime에 지정된 시간이 지난 후 삭제되고 가비지 수집됩니다.

Manually Priming a Query

이미 있는 데이터를 미리 가져올 필요가 없습니다. 쿼리 클라이언트의 setQueryData 메서드를 사용하여 쿼리의 캐시된 결과를 키별로 직접 추가하거나 업데이트할 수 있습니다.

queryClient.setQueryData(['todos'], todos)

Further reading

데이터를 fetch하기 전에 쿼리 캐시에 데이터를 가져오는 방법에 대해 자세히 알아보려면 커뮤니티 리소스에서 #17: 쿼리 캐시 시드하기 문서를 참조하세요.

Reference

• Prefetching | TanStack Query Docs