React 查询(11 部分系列)
文章平均质量分 51
Q shen
分享
展开
-
11. React 查询 - 分页列表
获取请求必须包含页面和限制(如果需要,您也可以使用限制和偏移量来处理分页)并且在您的页面中useQuery您必须处理一些简单的东西。首先,您的查询键也必须包含页面和限制,其次您必须将页面和限制传递给您的获取请求。如果您在应用程序中构建列表,通常会创建列表分页以改进平台的用户界面,但也会限制 API 中的工作。如果你喜欢我的文章,记得关注获取更多的信息。正如您所注意到的,使用 ReactQuery 构建分页的过程非常简单。创建一个状态来保存页面的限制(每页上的元素数量)原创 2023-06-01 18:59:24 · 305 阅读 · 0 评论 -
10. React 查询 - 中止请求
当你创建一个 AbortController ( controller = new AbortController()) 时,你会得到它的一个实例,它有两个核心概念:信号 ( controller.signal) 和中止方法 ( controller.abort())。使用这两个接口,在 javascript 中,您可以立即处理使用fetch API创建的 HTTP 请求的中止,如果需要,也可以使用axios。当您创建一个请求时,两者都接受一个信号,如果您中止该信号,您可以中止该请求。原创 2023-06-01 18:58:02 · 261 阅读 · 0 评论 -
9. 通过乐观更新改善用户体验
正如您所注意到的,在 mutate 事件中,代码为用户创建了一个祝酒词,这表明一切都以正确的方式进行,之后,代码获取当前状态,返回它并使用新值更新状态. 返回很重要,因为它允许在onError发生故障时获取此数据。有时为了改善用户体验,您可以决定押注代码的成功,这样您就可以假设代码会以正确的方式运行,从而使您的应用程序在用户眼中更快。保存以前的状态很重要,因为它允许您在未来需要时恢复它。不幸的是,如果您的代码在此事件中,则出现问题。如果您的代码在此事件中跳转,那么您是安全的并且一切都按正确的方式进行。原创 2023-06-01 18:54:59 · 71 阅读 · 0 评论 -
8. React 查询 - 键和预取
正如您在本系列中已经了解到的,React 查询使用键来保存特定 API 的数据。如果你想预取数据,这个概念和你选择的键也很重要,因为你必须使用相同的键来保存反应查询状态中预取的数据。正如您所注意到的,在这个onSuccess钩子示例中,预取功能开始加载列表结果中每个待办事项的数据。可以看到,这里的key和useQueryprefetch例子中的key是一样的,这样ReactQuery就可以知道数据是否已经加载了。可以想象,通过这个简单的功能,您可以提高应用程序的质量,并且可以预取一些加载时间过长的数据。原创 2023-06-01 18:54:27 · 85 阅读 · 0 评论 -
7.React 查询 - 启用查询
如您所见,useQuery只有在有用户时才会调用此方法;为了解决这个问题,useQuery挂钩接受一个名为的选项enabled,该选项接受一个布尔值来确定条件是真还是假。只有当应用程序中有一些数据时,才必须启用一些特定的钩子;正如您所注意到的,在这种情况下,自定义挂钩调用 API 并获取分配给当前用户的所有待办事项。此功能允许开发人员确保仅在满足条件时才调用特定 API,从而防止错误的 API 请求。如果你喜欢我的文章,记得关注获取更多的信息。好的,是时候学习了!原创 2023-06-01 18:51:18 · 87 阅读 · 0 评论 -
6. React Query - 过滤你的数据
在这两个简单的步骤中,您有一个select函数来过滤从查询中获得的数据集。然后另一个重要的事情是setUserFilter它用于设置userFilter值的函数。该函数有一个参数,这个参数包含了查询的结果;select 函数的范围是操纵查询结果并返回符合某些规则的新结果。在这种情况下,重要的是使用useCallback挂钩并将正确的依赖项传递给它以防止应用程序性能下降。如果你喜欢我的文章,记得关注获取更多的信息。正如您所注意到的,这个例子有一些要分析的关键点。原创 2023-06-01 18:51:36 · 122 阅读 · 0 评论 -
5. React 查询 - 身份验证流程
正如您在本系列中已经了解到的那样,您应该构建一个变异来执行此操作。为此,在这种情况下,最好的方法是创建一个名为useUser用户数据所有者的新挂钩。钩子useUser必须有用户的数据,并且它必须将用户的数据保存在本地存储中,并在用户刷新页面或将来返回时检索它们。简单的两行代码,就可以设置状态下的用户,useUser因为设置查询数据的key和useUser.正如您所注意到的,挂钩返回一个简单的函数,该函数清除用户状态中的值并导航到页面sign-in。通常,此代码是使用具有特定目标的小函数创建的,例如下一个。原创 2023-06-01 18:50:20 · 40 阅读 · 0 评论 -
4. React 查询 - 开发者工具
检查它周围的工具以了解开发人员的体验,以便您可以决定是否继续使用它。是的,它公开了许多好的功能来调试和检查你的 React Query 应用程序,对于每个使用 React Query 的开发人员来说,它都是一个很好的工具。使用 ReactQueryDevtools,您不必关注要渲染或不渲染组件的环境,因为它默认提供了它。在您的应用程序中使用此组件的好处是它允许在运行时查看 ReactQuery 中发生的情况。现在,在您的项目中,您可以使用它并获取调试应用程序所需的所有信息。原创 2023-06-01 18:45:31 · 141 阅读 · 0 评论 -
3. React 查询 - useIsFetching 和 useIsMutation
如您所见,语法非常简单。您可以从库中导入挂钩,然后可以在您的组件中使用该挂钩。该挂钩仅返回一个布尔值,指示应用程序中是否有一个或多个提取请求。这个钩子和上一个类似,唯一不同的是这个钩子处理的是变异请求。如果我们需要创建一个在有一个或多个请求正在进行时出现的全局加载器,它们就很有用。这些挂钩中的每一个都可用于了解应用程序中是否存在获取请求或是否存在变更请求。如果你喜欢我的文章,记得关注获取更多的信息。正如您所注意到的,语法与前一个语法相同,唯一的区别在于钩子的名称及其概念。原创 2023-06-01 18:43:42 · 69 阅读 · 0 评论 -
2. 反应查询 - useMutation
为此,您必须使用挂钩useQueryClient来检索 queryClient 并使用该invalidateQueries方法,您可以使特定查询或多个查询的 React 查询缓存无效。使用 QueryClient,您可以使已提供的查询无效,并说对查询做出反应以再次询问数据,因为您确定这些数据在更改后仍无效。在 React 应用程序中使用突变,您可以处理所有这些操作来突变数据并简化这些请求状态的管理。处理的选项,在这种情况下,成功和错误挂钩,还配置突变(重试、重试延迟等)。原创 2023-06-01 18:42:23 · 220 阅读 · 0 评论 -
1.反应查询 - useQuery
返回某种数据的函数可以是一个简单的函数,或者在大多数情况下是一个 promise。它是一个用于 React 的状态管理器,可简化许多任务,例如处理 HTTP 请求状态、在客户端中保存数据以防止多次请求、使用挂钩在您的应用程序中共享数据等。配置,好的,这些很简单 😃 有许多可能的选项可以以不同的方式运行查询(重试次数、刷新数据时、如何缓存数据等等。您将在本系列中发现更多关于它的信息,学习如何使用它,并欣赏它在您的 React 应用程序中的简单性。如果你喜欢我的文章,记得关注获取更多的信息。原创 2023-06-01 18:40:43 · 169 阅读 · 0 评论