공식문서 : https://tanstack.com/query/v4/docs/guides/prefetching

Prefetching

운이 좋다면, 유저가 필요로 하는 데이터를 필요로 하기 전에 prefetch 할 수 있도록 유저가 무엇을 할 것인지에 대해 충분히 알고 있을 것이다! 이 경우 prefetchQuery 메서드를 사용하여 캐시에 넣을 쿼리 결과를 prefetch할 수 있다.

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

• 이 쿼리에 대한 데이터가 이미 캐시에 있고 무효화되지 않은 경우, 데이터를 fetch하지 않는다.
• 예를들어 prefetchQuery('todos', fn, { staleTime: 5000 })로staleTime이 전달되고 데이터가 지정된 staleTime보다 오래된 경우 쿼리는 fetch된다.
• prefetch된 쿼리에 대해 useQuery 인스턴스가 나타나지 않으면, cacheTime에 지정된 시간 이후 삭제되고 garbage collect된다.

Manually Priming a Query

또는 이미 쿼리에 대한 데이터를 동기적으로 사용할 수 있는 경우, prefetch할 필요가 없다. Query Client의 setQueryData 메서드를 사용하여 쿼리의 캐시된 결과를 키 별로 직접 추가하거나 업데이트 할 수 있다.

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