react-query reuse an item from cache of items

Question

Imagine a typical use-case when you have a list of items and an item view.

So there is an endpoint to get all items. But also you can fetch a single item with /items/:id.

But you can avoid fetching a single item if it's already fetched from the /items endpoint. So how would you handle that with react-query?

function Items() {
  cosnt itemsQuery = useQuery('items', fetchItems);
  // render items
}
      
function SingleItem({ id }) {
  // you can have another query here and refetch item from server
  // but how to reuse an item from query cache and fetch only if there is no such item?
}

user_2670121 · Answer

Found answer in the docs

https://react-query.tanstack.com/docs/guides/initial-query-data#initial-data-from-cache

 function Todo({ todoId }) {
   const queryInfo = useQuery(['todo', todoId], () => fetch('/todos'), {
     initialData: () => {
       // Use a todo from the 'todos' query as the initial data for this todo query
       return queryCache.getQueryData('todos')?.find(d => d.id === todoId)
     },
   })
 }

react-query reuse an item from cache of items

1 Answers