Prefetching

If you're lucky enough, you may know enough about what your users will do to be able to prefetch the data they need before it's needed! If this is the case, you can use the prefetchQuery function to prefetch the results of a query to be placed into the cache:

1 import { queryCache } from 'react-query'
2 
3 const prefetchTodos = async () => {
4   const queryData = await queryCache.prefetchQuery('todos', () =>
5     fetch('/todos')
6   )
7   // The results of this query will be cached like a normal query
8 }

The next time a useQuery instance is used for a prefetched query, it will use the cached data! If no instances of useQuery appear for a prefetched query, it will be deleted and garbage collected after the time specified in cacheTime.

If a prefetched query is rendered after the staleTime for a prefetched query, it will still render, but will be automatically refetched in the background! Cool right?!

Manually Priming a Query

Alternatively, if you already have the data for your query synchronously available, you don't need to prefetch it. You can just use the Query Cache's setQueryData method to directly add or update a query's cached result.

1 import { queryCache } from 'react-query'
2 
3 queryCache.setQueryData('todos', todos)