react 查询重用项目缓存中的项目

Question

想象一下当您有一个项目列表和一个项目 View 时的典型用例。
所以有一个端点来获取所有项目。但您也可以使用 /items/:id 获取单个项目.
但是，如果已经从 /items 中获取了单个项目，则可以避免获取它。端点。那么你将如何处理 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?
}

Answer 1

在文档中找到答案
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)
     },
   })
 }