反应查询重用项目缓存中的项目

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)
     },
   })
 }

反应查询重用项目缓存中的项目

react-query reuse an item from cache of items

react-query