8. React 查询 - 键和预取

Q shen

于 2023-06-01 18:54:27 发布

阅读量99

点赞数

分类专栏： React 查询（11 部分系列）文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_52010446/article/details/130994109

版权

本文探讨ReactQuery中键的构造及其在确保API数据唯一性中的作用。同时，介绍了预取数据的概念，如何利用`prefetchQuery`提高用户体验，通过在请求前加载数据减少等待时间。通过示例展示了预取过程，强调了键的一致性以使ReactQuery能正确管理预取数据。

摘要由CSDN通过智能技术生成

大家好，如果您正在使用 ReactQuery，今天我想分享两件重要的事情。第一个是键是如何组成的，第二个是如何预取数据以减少用户浪费的时间。那么让我们开始吧🚀

钥匙
正如您在本系列中已经了解到的，React 查询使用键来保存特定 API 的数据。并且这些密钥对于每个特定的 API 都必须是唯一的。创建useQuery挂钩时，第一个参数是查询的键，它是一个数组。该数组用于组成密钥，它负责根据您的情况以正确的方式创建密钥。前面说过，key是一个数组，这样就可以创建一个由不同数据组成的key。

因此，例如，您可以拥有一个用于待办事项列表的键和一个用于特定待办事项详细信息的键（[“todos”]和[“todo”, 2]。）

正如您所注意到的，您可以随意输入密钥，字符串数字或布尔值；它完全站在你这边；您每次都必须记住的重要一点是每个密钥都必须是唯一的。如果你想预取数据，这个概念和你选择的键也很重要，因为你必须使用相同的键来保存反应查询状态中预取的数据。

预取
在某些情况下，在用户请求之前加载数据可能很有趣。这改善了用户体验并减少了他们浪费的时间。但是你怎么能用反应查询来做到这一点呢？

首先，您需要使用QueryClient公开该prefetchQuery方法的对象。

此方法接受两个参数：查询的键和提取请求。

通过这种方式，您可以用几行代码处理一个简单但功能强大的预取流程。我们来看看这个例子

export const useTodos = (): UseTodos => {
   
  const client = useQueryClient();

  const [userFilter, setUserFilter] = useState<number | null>(null);

  const filterTodoByAssignee = useCallback(
    (todos: Todo[]) =></