react-query - react-query 重用项目缓存中的项目

Question

想象一个典型的用例，当您有一个项目列表和一个项目视图时。

所以有一个端点可以获取所有项目。但您也可以使用/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)
     },
   })
 }