文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

使用React-Query解决接口请求的麻烦事

在后台更新“过期”数据 知道数据何时“过期” 尽快反映数据更新 性能优化，如分页和延迟加载数据 管理内存和服务器状态的垃圾收集 使用结构共享记忆查询结果 直到React-Query的出现，上面的问题都变得迎刃而解...React-Query React Query 是一个开箱即用，零配置的服务端状态管理库，支持Restful和GraphQL两种类型的请求，它能帮助你很好的获取、同步、管理和缓存你的远程数据。...默认0 cacheTime： 数据缓存时间 默认 1000 60 5 5分钟 retry： 失败重试次数 默认 3次 refetchOnWindowFocus： 窗口重新获得焦点时重新获取数据 默认...写入多项如：['repoData', '1'],这样React-Query在使用的时候会自动把它拼接为/repoData/1，这个在缓存用户访问过的页面时，非常有用。...，不必担心构建时需要排除他们 浮动模式下开启，会将devtools作为固定的浮动元素安装在开发的应用程序中，并在屏幕一角提供一个切换按钮以显示和隐藏devtools 在devtools中我们可以直观的看到已经缓存下来的数据和整个项目的配置

1.9K30

React 应用架构实战 0x5：集成 API 到应用中

在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...我们可以看到这里有一定量的重复代码： 需要定义相同的data、error和 loading 状态 必须相应地更新不同的状态 数据在我们离开组件时立即被丢弃 如果使用 React Query，我们可以使用...# 职位相关 Jobs 获取职位列表 // src/features/jobs/api/get-jobs.ts import { useQuery } from "@tanstack/react-query...isFetched, }; }; 获取职位详情 // src/features/jobs/api/get-job.ts import { useQuery } from "@tanstack/react-query

2K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    react-query从拒绝到拥抱

    react-query是一位数据获取专家，能够智能管理请求的一切内容，包括数据、状态、缓存，更新等，基于Hooks。...handleReload = () => { setisErr(false); //重置isErr为false，再次发送请求 }; if (loading) return 数据获取中...为了进一步增强应用和体验，比如网络错误自动重试，为了防止用户看到的是旧的数据，你需要增加窗口焦点时重新自动获取数据等，可以看出如此发展下去，组件需要管理的状态越来越多，你也会越来越力不从心，状态的增多，.../tannerlinsley/react-query") ); if (isLoading) return "数据获取中...}颗星 ); } 复制代码 在这里使用useQuery，此刻这个请求拥有了自动获取数据，管理请求状态，错误重试，窗口焦点自动获取数据，缓存等，它的第1个参数是一个唯一的key，名字有意义就好

    3.2K31

    用react-query解决你一半的状态管理问题

    事实上，他们有很大区别： 用户交互的中间状态 比如组件的isLoading、isOpen，这类「状态」的特点是： 以「同步」的形式更新 「状态」完全由前端控制 「状态」比较独立（不同的组件拥有各自的isLoading...」保存在组件内部（如App组件的data状态）。...例子中userData字符串就是这个query独一无二的key。 可以看到，React-Query封装了完整的请求中间状态（isLoading、isError...）。...不仅如此，React-Query还为我们做了如下工作： 多个组件请求同一个query时只发出一个请求 缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据） 对失效数据垃圾清理 数据的CRUD由...这样，React-Query就会重新请求userData对应query的数据。 总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

    3.1K10

    React 应用架构实战 0x6：实现用户认证和全局通知

    目前，当涉及到管理控制台中的用户身份验证时，应用程序仍然依赖于测试数据。在本节中，我们将构建应用程序的身份验证系统，允许用户认证并访问受保护的资源在管理控制台中。...除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求 每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用 由于身份验证是基于..., }; }; 在布局组件中，我们将使用 useUser hook 来获取用户数据： // src/layouts/dashboard-layout.tsx import { useLogout..., useUser } from "@/features/auth"; 另外，在 src/pages/dashboard/jobs/index.tsx 中，我们将使用 useUser hook 来获取用户数据...为了处理全局状态，我们将使用 Zustand，这是一个轻量级且非常简单易用的状态管理库。

    2.2K30

    使用React Query做为axios请求库的上层封装

    另外，现在的前端项目特别是单页面应用，会使用Flux、Redux、Mobox等状态管理库，会把组件间共享的数据都存放在状态管理库中，这些可以分为两类，一类是用户交互的中间状态,比如isLoading,isClose...，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。...解决了什么问题 服务端状态有以下特点： 存储在远端，本地无法直接控制 需要异步 API 来查询和更新 可能在不知情的情况下，被另一个请求方更改了数据，导致数据不同步 现有的状态管理库（如 Mobx、Redux...会在全局维护一个服务端状态树，根据 Query key 去查找状态树中是否有可用的数据，如果有则直接返回，否则则会发起请求，并将请求结果以 Query key 为主键存储到状态树中。...借助于这样的特性，我们就可以将所有跟服务端进行交互的数据从类似于 Redux 这样的状态管理工具中剥离，而全部交给 ReactQuery 来管理。

    3.1K30

    React Query 指南，目前火热的状态管理库！

    通过它，你可以以一种非常简单的方式从源中检索数据并处理此请求的所有状态。...请注意数据也可能为 undefined；这是因为在第一次调用时，当请求处于等待状态时，data 尚未呈现。 isLoading：这个标志表示 React Query 正在加载数据。...你可以检查状态中保存的数据，不同的查询有多少应用程序部分使用等等。你也可以重置状态或删除部分状态以重新获取数据。...现在使用 useSignUp hook，你可以获取 mutation 并调用 signUp 请求在你的系统中创建新用户。...useUser hook 必须具有用户数据，并且它必须将用户数据保存在本地存储中，并在以后刷新页面或返回时检索它们。

    6.6K42

    React 中请求远程数据的四种方法

    但是这个示例忽略了加载状态，错误处理，声明和设置相关状态等。在现实世界中， HTTP 调用看起来更像这样。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。 要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。...、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。

    4.5K10

    React 中请求远程数据的四种方法

    但是这个示例忽略了加载状态，错误处理，声明和设置相关状态等。在现实世界中， HTTP 调用看起来更像这样。...，抛出错误 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏 声明一个空的依赖项数组，以便 useEffect 只运行一次 这只是一个简单的示例，它忽略了许多其他相关问题...service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。 要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。...、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？ 你可以不断完善这个自定义Hook来完成所有这些操作。

    2.7K30

    为什么React开发者集体掉进了状态管理的陷阱

    React中那些被混淆的「状态」 一个容易被忽视的事实是：React中的状态从来不是平等的。它们属于两个完全不同的世界。 客户端状态（Client State）：你100%拥有和控制它。...useEffect地狱的具体表现 这个根本认知错误衍生出一份无穷的TODO清单，所有这些问题都得手工处理： 加载和错误状态管理：需要额外的isLoading、isError、isSuccess等状态来追踪请求的各个阶段...正确的架构思路 一个成熟的服务端状态管理方案应该： 自动处理缓存：同一时间内对同一数据的多个请求应该只发送一次 智能刷新：决定什么时候数据算「新鲜」，什么时候应该后台重新获取 并发控制：确保不会因为网络波动导致新数据被旧数据覆盖...需要手工处理AbortController才能真正取消旧请求 if (isLoading) return加载中......，清理缓存 }); 这样的配置意味着： 用户在30分钟内多次打开同一商品，永远是秒加载 但如果他在网络恢复后打开，会在后台自动检查是否有价格/库存更新 1小时没看过的商品就不占用内存了 何时使用废弃查询

    22710

    Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

    forceRender 属性，这个属性可以控制是否强制渲染，这也是为了解决，我们在刚打开时，组件未渲染导致报错的问题 同时我们也可以发现，我们在当中设置了三元判断，这样是为了优化我们的用户体验，前面也提过了...，我们整个项目采用的是 react-query 进行 url 管理，在它的 API 中有能够返回 isLoading 状态的 hook 也就是我们的数据请求的完成状态，这也让我们可以利用这个 isLoading...modal ，在我们的 useProjectModel 中已经暴露了 close 方法，我们只需要在 onFinish 中调用即可 当 form 表单成功提交时，会自动调用 onFinish 方法，...这其实利用的是 useMutation 这个 react-query 中的原生 hook // 示例 return useMutation( (params: Partial)...num 的高端操作，其实就是一个转化成 boolean 类型的方法 接着我们就可以在 columns 中使用这个 Pin 组件了，在星星状态改变时调用编辑方法，改变数据中的 pin 状态 {

    1.5K30

    React 查询：无限滚动

    在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。...src/Todo/index.tsxconst observer = useRef();观察者是一种设计模式，定义了对象之间的一对多依赖关系，以便当对象更改状态时...但你可能会想 为什么我要解释所有这些概念，我们将需要使用观察者来查看用户是否在页面底部，以便传递下一个页面参数时获取新数据。所以，是的！...allPages.length + 1 : undefined; },});我们将解构并获取数据、错误消息、fetchNextPage 函数、hasNextPage 属性、isFetching 和 isLoading...我们将在 queryKey 中传递键值 'todos'，在 queryFn 中传递 fetchTodos 函数，并在 getNextPageParam 中创建一个函数来获取下一页，增加并验证我们是否有数据

    86800

    探索 React 状态管理：从简单到复杂的解决方案

    使用useState()进行基本状态管理我们从使用useState()钩子进行最简单形式的状态管理开始。我们将探讨如何在功能组件内初始化和更新状态。...Redux用于集中式状态管理在进入更复杂的场景时，我们引入了Redux，这是一个广泛采用的用于管理应用程序状态的库。...在Child组件中，我们使用useSelector钩子从Redux store中获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...当单击增量或减量按钮时，我们使用dispatch函数分派相应的动作。利用React Query进行服务器状态管理对于涉及服务器端状态管理（如数据获取和缓存）的情景，我们引入React Query。...在DataComponent中，我们使用useQuery钩子使用fetchData函数获取数据。它返回一个包含数据、isLoading和isError等属性的对象，用于处理加载和错误状态。

    2.7K31

    Redux你是个好人，只是我们不合适

    当谈论状态管理时，通常在谈什么 当谈论「状态管理」时，一般会从「广度」、「深度」两个方面来。 广度上，在其之后涌现的解决方案，似乎都在对标Redux，提出自己独到的解决方案。...如果没使用「状态管理」方案，常见方式是请求数据后保存在组件state中，如： function App() { const [data, updateData] = useState(null);...」方案如Redux，会将请求的数据序列化后保存在「全局状态」中。...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当可复用组件、或状态需要跨组件层级传递，通常使用Context API。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。

    75610

    Redux你是个好人，只是我们不合适

    当谈论状态管理时，通常在谈什么 当谈论「状态管理」时，一般会从「广度」、「深度」两个方面来。 ? 广度上，在其之后涌现的解决方案，似乎都在对标Redux，提出自己独到的解决方案。...如果没使用「状态管理」方案，常见方式是请求数据后保存在组件state中，如： function App() { const [data, updateData] = useState(null);...」方案如Redux，会将请求的数据序列化后保存在「全局状态」中。...用户交互的中间状态 交互的中间状态，比如isLoading、isOpen，同样保存在组件内部。 当是可复用组件、或状态需要跨组件层级传递，通常使用Context API。...对于缓存，常见的需求是： 数据状态，加载中？加载完成？发生错误？ 缓存失效后的更新 复用缓存数据 在React技术栈，SWR、react-query都是优秀的解决方案。这里以SWR举例： ?

    1.2K20

    开发Web3交易所前端开发指南-从注册测试到Wagmi实战的完整流程

    - 合约 ABI核心优势:完全类型安全,编译时捕获错误自动推断函数参数和返回值类型无需手动维护 ABI 和地址四、实战:余额查询功能4.1 设计思路在 Web3 交易所中,我们需要查询多种余额:钱包中的...ETH 余额钱包中的代币余额(如 YXT)交易所合约中托管的 ETH 余额交易所合约中托管的代币余额代币对交易所的授权额度4.2 完整实现import { exchangeAddress, useReadExchangeBalanceOf..."发送中..." : isLoading ?...交易状态管理const { data: hash, writeContract, isPending, error } = useWriteExchange();const { isLoading, isSuccess...: React Query 处理异步状态和缓存 ✅ 交易流程: 完整的发送、等待、确认流程 ✅ 错误处理: 优雅处理各种异常情况8.2 完整代码获取想要获取完整的项目代码和深入研究?

    22710

    Hooks + TS 搭建一个任务管理系统（一）-- 登录注册页面

    第二个状态是错误状态，用来接收登录页面的错误信息，当有错误发生时，都会丢到这个变量当中 // 标识当前是注册还是登录，false 表示当前是登录状态 const [isRegister, setIsRegister...对象抛出的错误，我需要使用 then 中的第二个参数来接收这 错误对象，再返回这个错误，才能使用 catch 获取，正常情况下，catch 获取不到这个错误 // run是主入口，触发异步请求 //...// 当初始化和加载中的时候显示loading if (isIdle || isLoading) { return }...} = useAsync(undefined, { throwOnError: true }) 我们得到了 login 函数，同时也得到了 isLoading 的状态 当表单提交时，会触发 Form...会触发 catch 中的 onError 设置 index 中的 error 状态，显示在页面当中 总结 在这个登录注册页面当中，我们可以学到以下几点 context 状态管理 custom hook

    1.6K11
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券