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

react-query从拒绝到拥抱

下面来看看react-query是如何把这件事变成乐趣的。...Mutations useMutation：用来创建、更新、删除数据，当你的接口涉及这些逻辑时你可以使用它。...下面来看下Queries的配置对象 Queries options 配置对象就是第3个参数，它是一个对象，这个配置对象在useQueries，useInfiniteQuery中也相同,这个对象有数十个参数可供配置...error,//错误对象，如果存在则包含相关的错误信息 refetch，//这个还挺实用的，你可以在需要的地方或需要更新数据时调用，则会触发这个请求，比如enabled=false时...复制代码 Mutation(突变) 用来创建/更新/删除数据时使用，最典型的例子就是一个todoList，对todo进行增删改相关的请求。使用useMutation hooks。

3.2K31

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

，需要使用其返回的“refetch”来触发操作 queryFn：全局定义请求方法，其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query提供的用于请求接口并管理请求状态等信息的...写入多项如：['repoData', '1'],这样React-Query在使用的时候会自动把它拼接为/repoData/1，这个在缓存用户访问过的页面时，非常有用。...基本是相同的，这里的mutate则是触发更改的方法，如果我们想执行useMutation中传入的方法，我们只需要调用mutate即可，传给mutate的参数都会被带到useMutation的构造方法中。...那我们可以使用queryClient的prefetchQuery方法，提前拉取到用户可能会访问的数据，并加入到缓存中，由于不需要监听服务端状态等，所以这个方法会比useQuery高效许多。...Devtools ，不必担心构建时需要排除他们 浮动模式下开启，会将devtools作为固定的浮动元素安装在开发的应用程序中，并在屏幕一角提供一个切换按钮以显示和隐藏devtools 在devtools

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

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

    你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...为了更好地在代码中理解突变是什么，让我们从一个代码片段开始 import { useMutation } from '@tanstack/react-query'; const postTodo =...这些 hooks 可用于了解应用程序中是否存在获取请求或突变请求正在进行。 如果需要创建一个全局的加载器，在存在一个或多个请求进行时出现，它们就会很有用。 但是你如何使用它们呢？...当你开始学习或使用一个工具时，检查它周围的工具以了解开发者体验是很正常的，这样你就可以决定是否继续使用它。...权限 每个应用程序都应该处理认证流程；在这篇文章中，你将学习如何使用 React Query 在你的 React 应用程序中构建认证流程。 注册 构建认证流程的第一步是注册操作。

    6.6K42

    urql实现GraphQL的react客户端

    安装urql # npm npm i --save urql graphql # or yarn yarn add urql graphql 使用urql 从服务器 GraphQL Endpoint...client}> ); 通过createClient创建一个客户端，url指定服务端地址，fetchOptions提供一个函数，返回要添加到请求中的参数信息...，比如token 利用react的上下文来传递客户端给子组件，则接下来在Todos组件中可以直接使用query而不需要再次创建客户端 执行查询 import { useQuery } from 'urql...执行变更 与查询不一样的是，变更语句不会在调用useMutation这个Hook函数时立即执行，而是需要通过函数返回值的第二个元素（其是一个函数），传入数据调用以后才会请求执行。...import { useMutation} from 'urql'; const UpdateTodo = ` mutation ($id: ID!, $title: String!)

    2K20

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

    用户交互的中间状态 服务端状态 在陈年的老项目中，通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。...当「状态」需要跨组件层级传递，通常使用Context API。 再大范围的「状态」会使用Redux这样的「全局状态管理方案」。...不仅如此，React-Query还为我们做了如下工作： 多个组件请求同一个query时只发出一个请求 缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据） 对失效数据垃圾清理 数据的CRUD由...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改 在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

    3.1K10

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

    虽然像Redux这样的库是管理应用程序状态的流行选择，但你应该明白何时使用它们，何时不使用它们，而且在满足需求时考虑像Context API这样的简单替代方案也很重要。...请注意，这是经典redux的例子，今天没有人使用它，而是使用了一个被称为redux toolkit的东西，它与redux的概念相同，但更容易使用，我们将在下一篇博客中完全了解redux toolkit以及它是如何简化我们的生活的...在Child组件中，我们使用useSelector钩子从Redux store中获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...在DataComponent中，我们使用useQuery钩子使用fetchData函数获取数据。它返回一个包含数据、isLoading和isError等属性的对象，用于处理加载和错误状态。...我们使用useMutation钩子使用postData函数处理POST请求。useMutation返回的mutation对象包括一个mutateAsync方法，可用于触发变异。

    2.8K31

    Hooks + TS 搭建一个任务管理系统（七）-- 任务组页面实现

    布局的简单介绍 这里我们采用的是 antd 中的 List 组件，顶部左右两侧采用的是自己封装的 Row 组件，让它们排列在两侧，链接跳转部分采用的 Link 组件，通过遍历数据的方式实现渲染 2....> client('epics', { data: param })) } 我们在 epic/index.ts 中使用 ，获取任务组数据 epics 以及用于跳转链接的 tasks 数据 // 关于任务的信息...id }) 这样我们就实现了数据的获取 接下来我们来看看如何在组件中使用这两个数据的 对于 epics 它作为我们需要渲染的主内容，需要通过 List.Item 进行渲染 在 List 组件中，我们可以传入我们的数据源...，第二个参数来配置 config 如何处理缓存中的数据 // 删除看板 export const useDeleteEpic = (queryKey: QueryKey) => { const...，最后我们再稍微讲讲任务组 item 中的路由跳转 三、路由跳转 当我们点击下面的任务时，需要跳转到看板页面对应任务的编辑窗口，我们来看看效果图 其实这只要我们的路由地址配置好了就没有问题了 我们来看看如何配置这个跳转的路由地址

    1.2K20

    Hooks + TS 搭建一个任务管理系统（六）-- 看板页面展示

    中获取数据，在这里我们需要十分明确，这个我们的这个组件它只是渲染一列，我们通过遍历实现多列，这个很关键 我们在 column 中获取所有的 task 数据，通过 filter 方法，将它筛选出来，这样...其实在我们在遍历添加 kanbanColumns 组件时，只会发起一个请求，即使，我们给每一个 column 都绑定了 useTask 这是因为，我们采用的 react-query 的功劳，在我们采用...useQuery 时，如果在 2s 之内有相同的 queryKey 发出请求的话，就会合并这些请求，只会发出一个 现在我们已经有了每个看板下的 Task 数据了，我们只需要遍历渲染即可，这里我们采用的还是...Antd 组件库 2. useTaskTypes 处理不同类型任务的 icon 在我们的任务中又分为 bug 和 task，我们都会有相应的图标展示 在这里我们在 utils 下封装一个 useTaskTypes...这部分的内容和之前的项目列表相似度很高，我们这里就不详细讲了，稍微解释以下这些 hook 的作用 1. useAddKanban 接着我们需要处理看板增删的 hook ，在这里我们有必要采用乐观更新来实现，不然在服务器请求慢时

    94140

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

    在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...它支持在浏览器和服务器端使用，并且具有创建实例、拦截请求和响应、取消请求等功能的 API。 我们首先要创建一个 Axios 实例，其中包含一些我们希望在每个请求上执行的通用操作。...我们可以看到这里有一定量的重复代码： 需要定义相同的data、error和 loading 状态 必须相应地更新不同的状态 数据在我们离开组件时立即被丢弃 如果使用 React Query，我们可以使用...API 层 之前为了在没有 API 功能的情况下构建 UI，我们在页面上使用了测试数据。

    2K20

    Typescript 全栈最值得学习的技术栈 TRPC

    请记住，tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript 时，tRPC 才会发挥其优势。...通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询，类似 SWR 无限加载。...（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图） 首先在 server/auth.ts 中 导入 server/auth.ts...如今 Vercel 应该也已经家喻户晓了，因此这里就不演示如何部署，可到 Vercel • Create T3 App 中查看相关步骤。...（不过我比较好奇为啥好多远程数据服务多数都是postgresql） 如果你执意要使用 vercel 部署，当你触发数据库服务时便会报错，以下是相关截图。

    4.2K51

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

    目前，当涉及到管理控制台中的用户身份验证时，应用程序仍然依赖于测试数据。在本节中，我们将构建应用程序的身份验证系统，允许用户认证并访问受保护的资源在管理控制台中。...除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求 每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用 由于身份验证是基于...(user); }, }); return { submit, isLoading, }; }; 在登录表单中，我们将使用 useLogin hook 来处理登录请求...(); }, }); return { submit, isLoading, }; }; 在登出按钮中，我们将使用 useLogout hook 来处理注销请求...@/features/auth"; 另外，在 src/pages/dashboard/jobs/index.tsx 中，我们将使用 useUser hook 来获取用户数据： // src/pages

    2.3K30

    你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

    第一部分：问题诊断——你真的在写「同步」逻辑吗？ React中那些被混淆的「状态」 一个容易被忽视的事实是：React中的状态从来不是平等的。它们属于两个完全不同的世界。...直接使用缓存，不会闪加载中 ✅ 智能刷新：5分钟内数据被认为是新鲜的，不会重新请求；超过5分钟后会后台刷新 ✅ Tab激活刷新：用户从其他Tab回来时会自动检查数据是否需要更新 ✅ 没有竞态条件：内部自动处理了请求的顺序问题...这里useMutation展现出了威力。...gcTime：内存中的缓存何时被彻底清理掉。如果用户3分钟都没有用到某个查询，那么在gcTime过期后，这份缓存就会被垃圾回收。...，清理缓存 }); 这样的配置意味着： 用户在30分钟内多次打开同一商品，永远是秒加载 但如果他在网络恢复后打开，会在后台自动检查是否有价格/库存更新 1小时没看过的商品就不占用内存了 何时使用废弃查询

    23610

    Typescript 全栈最值得学习的技术栈 TRPC

    请记住，tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript 时，tRPC 才会发挥其优势。...图片图片通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询，类似 SWR 无限加载。...（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图）图片首先在server/auth.ts 中 导入import CredentialsProvider...如今 Vercel 应该也已经家喻户晓了，因此这里就不演示如何部署，可到 Vercel • Create T3 App 中查看相关步骤。...（不过我比较好奇为啥好多远程数据服务多数都是postgresql）如果你执意要使用 vercel 部署，当你触发数据库服务时便会报错，以下是相关截图。

    2.7K20

    在Vue3中使用Vuex时，如何在组件中映射state和getters？

    在 Vue3 中使用 Vuex 时，由于 Composition API 的引入，映射 ​​state​​​ 和 ​​getters​​ 的方式与 Vue2 的 Options API 有所不同。...基础方式：手动映射（推荐）在 Vue3 的 ​​​​ 中，通过 ​​useStore​​ 获取 store 实例，再结合 ​​computed​​ 手动映射 ​​state​​...for (const key in getters) { res[key] = computed(() => store.getters[getters[key]]) } return res}在组件中使用...在 Options API 中使用（兼容方式）如果在 Vue3 中仍使用 Options API，可直接沿用 Vue2 的映射方式：import { mapState, mapGetters...命名空间模块： 若使用带命名空间的模块，需在映射时指定模块名：// 手动映射命名空间模块const moduleCount = computed(() => store.state.moduleName.count

    36410

    在小程序框架Taro中使用 vue3+graphqlFrame

    前言： 在小程序中使用 graphql 相对来讲是一个小众的需求，并且在 Taro 中就更少一些，但对我们来讲却是一个必需要解决的问题。...graphql client实现是有一套规范标准，并且针对使用复合API编写响应式查询/变量、缓存还是要有一定支持才能体现 graphql 的强大。...helpers.ts │ ├── index.ts │ ├── shared │ ├── symbols.ts │ ├── types.ts │ ├── useClient.ts │ ├── useMutation.ts...客户端测试 总结 此次文章中记录了 taro3 + vue3 + graphql 的整合方案，评估了 URQL和Villus两套方案，最终选用 Villus 的改造方案，完成了整套技术的结合，并最终在商业应用中完美的使用...希望对有在小程序中使用 grahql 的朋友有所帮助。

    1.2K10

    为什么我不再用Redux了

    Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据，并解决了在组件树中 prop-drilling 的问题。...当我们开始在前端重新创建数据库时，后端和前端之间的职责界限很快就变得模糊不清。作为前端开发人员，我们不需要完全了解表及其关系即可创建简单的 UI。我们也不必知道如何高水平地标准化我们的数据。...https://react-query.tanstack.com/docs/overview 现在，无论需要什么数据，你都可以将 useQuery hook 与你设置的唯一键（在本例中为“todos”）...只要函数是异步的，实现就无关紧要——你可以轻松地使用 Fetch API 代替 Axios。 要更改后端状态时，React Query 提供了 useMutation hook。...React Query 和 SWR 大约是在同一时间开始开发的，并且以积极的方式相互影响。在 react-query 文档中也对这两个库进行了彻底的比较。

    3.4K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券