如何最好地从反应查询缓存中获取数据？答案

【问题标题】：how to best get data from react-query cache?如何最好地从反应查询缓存中获取数据？
【发布时间】：2021-09-07 21:39:24
【问题描述】：

所以 react-query 缓存是一个键值存储，但这有点限制，不是吗？我认为最好将网络请求保持在最低限度，因为它们比从缓存中获取数据花费的时间要长几个数量级。话虽如此，如果我有一个路由 /todos 作为所有待办事项的页面，并且有一个子路由 /todos/FE234F32 作为一些随机待办事项的页面，那么所有待办事项的查询键都是 ["todos"] 和特定的查询键是[“todos”，“FE234F32”]，然后说我首先访问包含所有待办事项的页面，我将在缓存中获得所有待办事项的数据，但是如果我去页面对于特定的 todo，它会发出网络请求，因为 ["todos", "FE234F32"] 没有值。

我知道我可以在 ["todos", "FE234F32"] 的查询函数中执行 getQueryData("todos")，这样我就可以检查数据是否已经在缓存中，但是这种基于条件的解决方案会使代码缓存内有更大的虚拟层次结构看起来很糟糕。一般来说，似乎大多数状态解决方案都是分层的或基于对象的。但是 react-query 的键值性质要么导致获取太多数据并选择向下或获取已经在缓存中的数据。

我可能完全不在这儿，但我希望得到一些见解/提示！

【问题讨论】：

标签： react-query

【解决方案1】：

使用 react-query 有很多方法可以做到这一点。如果您的列表查询与您的详细查询的数据结构确实相同，您可以在获取列表后将其拉下查询，这将预先填充详细缓存：

useQuery(
  'posts',
  fn,
  {
    onSuccess: data => data.map(post =>
      queryClient.setQueryData(['posts', id], post)
  }
)

与正确的staleTime 设置一起，您可以避免额外的提取。

您也可以通过initialData 挂载详细查询后执行相反的操作并提取数据：

useQuery(
  ['posts', id],
  fn,
  {
    initialData: () =>
      queryClient.getQueryData(['posts']?.find(post => post.id === id)
  }
)

最后，如果您的数据真的总是相同的，您可以考虑使用 select 函数从列表查询中获取数据，而不是进行额外的提取。如果您需要某个详细信息的数据并且缓存中还没有数据，则这样做的缺点是总是重新获取整个列表：

const usePosts = (select) => useQuery(['posts'], fetchPosts)
const usePost = (id) => usePosts(data => data.find(post => post.id === id))

【讨论】：