使用useMutation重试(React查询) - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

UseQuery 是一个 React hook，它需要三个参数： 1.查询关键字 2.查询函数 3.配置项让我们从第一个参数开始。查询关键字是 React Query 用于识别你的查询的关键字。...通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...然后是配置项，这些很简单啦 :) 有许多可能的选项用于以不同的方式运行查询（重试次数、何时刷新数据、如何缓存数据等等..）。...、重试延迟等）。...为了这样做，你必须使用 useQueryClient 钩子来检索 queryClient，并使用 invalidateQueries 方法，你可以使 React Query 缓存无效，同时使指定的查询或多个查询失效

6.4K4 2

大厂都在用 @tanstackreact-query 到底有多好用！

前言最近参与新的项目了，发现项目居然使用了 @tanstack/react-query，以前之后简单介绍过，今天再来详细上手使用下！...以下是 React Query 的详细使用过程准备 pnpm add @tanstack/react-query 然后在根入口处使用 Provider!...突变与更新（useMutation） useMutation 用于数据更新，如 POST 请求，支持乐观更新和回滚。...import React, { useState } from"react"; import { useQuery, useMutation, useQueryClient } from"@...，则需要使用 enabled 属性！

5051 0

您找到你想要的搜索结果了吗？

是的

没有找到

react-query从拒绝到拥抱

其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...}颗星 ); } 复制代码在这里使用useQuery，此刻这个请求拥有了自动获取数据，管理请求状态，错误重试，窗口焦点自动获取数据，缓存等，它的第1个参数是一个唯一的key，名字有意义就好...Mutations useMutation：用来创建、更新、删除数据，当你的接口涉及这些逻辑时你可以使用它。...,{ enabled, //默认为true，表示自动请求，false的话则需要你手动 retry, //请求失败后，请求的重试次数，也可以为boolean，true为无数次重试，false...复制代码 Mutation(突变) 用来创建/更新/删除数据时使用，最典型的例子就是一个todoList，对todo进行增删改相关的请求。使用useMutation hooks。

3.2K3 1

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

手工处理还是容易出BUG 竞态条件（Race Condition）：用户在网速慢的情况下快速切换筛选条件，旧请求比新请求晚回来，就会看到错误的数据失败重试机制：网络波动时要不要自动重试？重试多少次？...这里useMutation展现出了威力。...如果用户3分钟都没有用到某个查询，那么在gcTime过期后，这份缓存就会被垃圾回收。...小时内如果用户没看这个商品，清理缓存 }); 这样的配置意味着：用户在30分钟内多次打开同一商品，永远是秒加载但如果他在网络恢复后打开，会在后台自动检查是否有价格/库存更新 1小时没看过的商品就不占用内存了何时使用废弃查询...// ❌ 过度使用，效率低 onSuccess: () => { queryClient.invalidateQueries(); // 刷新所有查询！

1821 0

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

因为处理服务端的状态，通常还包括：缓存将对同一数据的多个请求消除为一个请求在后台更新“过期”数据知道数据何时“过期” 尽快反映数据更新性能优化，如分页和延迟加载数据管理内存和服务器状态的垃圾收集使用结构共享记忆查询结果...useMutation 除了获取数据，很多时候还需要处理数据的修改，比如说最简单的todo list例子，除了拉取数据列表，还需要增删改数据，而这个时候除了需要发送接口，还需要修改本地的数据，React-Query...提供了useMutation来帮我们完成这些事情。...最后感谢你能看到这里，本文简单介绍了React-Query对服务端数据进行增删改查的功能实现，以及React-Query的一些其他能力，希望对你有用，React-Query的使用场景没有其他状态管理库那么广泛...笔者之后也会继续更新React-Query的其他使用场景，如果可以的话，不妨点个赞再走呢，这对我很重要。

1.8K3 0

python使用retrying重试请求

因此，我们也需要让 python 进行重试。...而 retrying 模块应运而生 retrying 的安装很简单，用 pip 一键安装： pip install retrying 为了表现 retrying 的重试功能，我们故意请求一个不规范的链接...，如 www.baidu.com ，由于没有带 http 协议，request 会报错，从而触发 retrying 重试代码如下： import requests from retrying import...---------------- ------------------------------ ------------------------------ None 说明，retry 在遇到异常后会重试运行...，直到给定的最大重试次数 ?

1.5K3 0

urql实现GraphQL的react客户端

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

1.9K2 0

React 查询：无限滚动

在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。...在这些平台上，我们不再使用传统的分页，而是通过无限滚动来加载数据。没有上一页或下一页的按钮，数据会根据需要自动生成。但在底层，无限滚动仍然是分页的一种形式。下面让我们看看代码吧！...我会将其作为对象接收并使用解构。...但你可能会想为什么我要解释所有这些概念，我们将需要使用观察者来查看用户是否在页面底部，以便传递下一个页面参数时获取新数据。所以，是的！...正如我之前所说，无限滚动是一种不同类型的分页让我们使用 React Query 的 useInfiniteQuery 钩子。

7080 0

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

这个属性可以控制是否强制渲染，这也是为了解决，我们在刚打开时，组件未渲染导致报错的问题同时我们也可以发现，我们在当中设置了三元判断，这样是为了优化我们的用户体验，前面也提过了，我们整个项目采用的是 react-query...封装增删改查 hook引出在上一小节中，我们也看到了这些 hook 的使用，我们在使用的时候只需要传递一个 queryKey ，就能够返回一个 mutate 以及一些相关的配置，这些我们并没有手动的去写...这其实利用的是 useMutation 这个 react-query 中的原生 hook // 示例 return useMutation( (params: Partial)...，因为利用 useMutation 这个 API 来实现乐观更新，会牵扯到 useMutation 生命周期的问题，我们封装一个 useConfig 来编写这些生命周期函数在这个 hook 中我们使用了大量的...context.previousItems) } } } 我们来简单讲讲这些 API 吧 queryClient.invalidateQueries：在提交成功/失败之后都进行重新查询更新状态

1.5K3 0

GraphQL在现代Web应用中的应用与优势

后端设置（使用graphql-yoga）首先，我们需要创建一个GraphQL服务器。...编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...useMutation } from '@apollo/client';import client from '....const { loading, error, data } = useQuery(GET_HELLO); const [addMessage, { data: mutationData }] = useMutation...运行应用启动后端服务器：node server.js然后启动前端应用，假设使用Create React App：npm startGraphQL基本查询1.

1.3K1 0

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

每当状态发生变化时，React都会处理组件的重新渲染并相应地更新显示的计数。这个基本例子演示了在React应用程序中使用useState()钩子管理状态的简单性和强大性。...当单击增量或减量按钮时，我们使用dispatch函数分派相应的动作。利用React Query进行服务器状态管理对于涉及服务器端状态管理（如数据获取和缓存）的情景，我们引入React Query。...import React from 'react';import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query...我们使用useMutation钩子使用postData函数处理POST请求。useMutation返回的mutation对象包括一个mutateAsync方法，可用于触发变异。...Parent组件使用QueryClientProvider将DataComponent包装起来，以向使用React Query的组件提供QueryClient实例。

2.1K3 1

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

当「状态」需要跨组件层级传递，通常使用Context API。再大范围的「状态」会使用Redux这样的「全局状态管理方案」。...这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...const {mutate} = useMutation(userData => axios.post('/api/user', userData), { onSuccess: () => {...这样，React-Query就会重新请求userData对应query的数据。总结通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

3.1K1 0

关于微信支付-商户平台:查询订单提示“查询失败:操作失败，请稍候重试”的分析

其中一个客户给我我们提供了手机截图，我们根据用户提供的订单号，登录微信支付商户平台，交易中心，按订单号进行查询，如下图，查询后的结果却显示“查询失败:操作失败，请稍候重试”......分析一般的情况下，查询订单会有两种结果，一、查不到，二、查得到。一、查询不到订单号的显示如下图：点击查询按钮后，系统显示“查询失败：商户订单号输入不正确”。...二、查询得到订单，如下图：但第三种情况，某些存在且更新异常的订单，仍然提示 “查询失败:操作失败，请稍候重试”，则比较让人疑惑，如果按照字面的稍候重试去理解，则永远的答案都会是显示这一句话。...应对目前来看，查询订单的结果无非这三种情况，无论何种情况，我们需要以下几点应对方案：（1）建立日志跟踪机制是必不可少的，我们以 MS SQL SERVER 举例建立类似如下表：序号字段名类型...nvarchar](50) 微信返回的退款订单号 15 cid uniqueidentifier 日制记录唯一标识（2）建立对帐排查功能如下图登录微信支付商户平台，进入交易中心、交易订单、批量订单查询

1.1K1 0

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

我们需要以下内容：认证功能（登录、注销和访问已认证用户）保护需要用户进行身份验证的资源 # 功能实现 # 登录 // src/features/auth/api/login.ts import { useMutation...const useLogin = ({ onSuccess }: UseLoginOptions = {}) => { const { mutate: submit, isLoading } = useMutation...Log in ); }; # 登出 // src/features/auth/api/logout.ts import { useMutation...const useLogout = ({ onSuccess }: UseLogoutOptions = {}) => { const { mutate: submit, isLoading } = useMutation...为了处理全局状态，我们将使用 Zustand，这是一个轻量级且非常简单易用的状态管理库。

2.1K3 0

Nest 实现 GraphQL 版 TodoList

比如 GET 请求 /students 查询所有学生，/students/1 查询 id 为 1 的学生发送 POST、PUT、DETETE 请求分别代表增删改。...：修改：单个查询：删除：查询：基于 GraphQL 的增删改查都成功了！...然后在 react 项目里调用下。...：然后加一下新增：用 useMutation 的 hook，指定 refetchQueries 也就是修改完之后重新获取数据。...可以在 playground 里调用接口，也可以在 react 里用 @appolo/client 调用。

6731 0

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

我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...React Query React Query 是一个很好的处理异步数据的库，可以将数据在 React 组件中使用。...React Query 的另一个好处是它的缓存机制。对于每个查询，我们需要提供相应的查询键，用于将数据存储在缓存中。这也有助于请求的去重。...API 请求可以是查询或更新。对于每个 API 请求，我们都将有一个文件，其中包含并导出 API 请求定义函数和用于在 React 中使用请求的 hook。...对于请求定义函数，我们将使用我们刚刚创建的 axios client，对于 hooks，我们将使用 React Query 的 hooks。

2K2 0

Pinia党福音，Pinia伴侣：pinia-colada

如果在分页的场景中使用时，可以使用 placeholderData 防止清空数据！...它返回一个可以在 Store 中使用的查询函数。...const { data, isLoading } = fetchTodoById(todoId.value); useMutation 基本用法 useMutation 用于请求副作用，管理数据修改操作...以下是 useMutation 的基本用法： import { useMutation } from'@pinia/colada'; const { mutate, // 触发修改操作的函数...它返回一个可以在 Store 中使用的修改函数。

5131 0

Redux 真的被高估了吗？我在大型项目中发现的真相

state return state } // 组件使用 const isOpen = useSelector(state => state.dropdown.isOpen) const dispatch...'dark' : 'light' })) })) // 使用 const user = useStore(state => state.user) const addToCart = useStore...状态爆炸（数据模型越来越复杂）维护地狱用 React Query 就对了： import { useQuery, useMutation } from'@tanstack/react-query'...Query 替你处理缓存、重试、失败处理……你就写业务逻辑。...→ 用 React Query 只有当这些都不适合，你才需要考虑 Redux。大多数项目，你根本走不到那一步。

1471 0

海量交易订单查询没做“重试”，一哥们“喜提”P3故障！

，决定拼团成功失败；提示：画图工具使用的是OmniGraffle ?...定时任务直接跑超时了，问题经查发现是交易单查询超时！直接导致拼团活动到达结束时间，拼团活动无法在约定的时间结束，无法结算，无法发货，造成资损XX元。后来通过定时任务手动重试解决查询超时问题。...为什么查询的订单量这么少就超时了？为什么??? 从上述的场景中，得出的结论就是，关键的接口超时没有做好重试处理，数据量上升的时候，查询超时的问题不能够自动解决！...4.1、为什么进行重试我们依赖的外部服务对于调用者来说一般都是不可靠的，尤其是在网络环境比较差的情况下，网络抖动很容易导致请求超时等异常情况，这时候我们就需要使用失败重试策略重新调用服务提供方的接口来获取数据...重试常见的一种方式是使用定时任务重试，例如某次操作失败，记录下来，当定时任务再次启动，则将数据放到定时任务的方法中，重新跑一遍，最终直至得到想要的结果为止。

1.1K2 0

使用React Buddy辅助React开发

安装插件安装大纲大纲是包含React组件的文件的紧凑表示。打开组件文件，然后按当前编辑器右上角的树图标。...树图标大纲大纲面板允许进行下列操作点击跳转到指定的元素拖拽排序元素节点右键操作元素操作元素使用「生成处理程序」可以快速编写操作函数,例如onClick 生成处理程序 import React..., { useCallback } from 'react'; const MyComponent = (props) => { const onDivClick = useCallback((event...onDivClick}> ); }; export default MyComponent; 预览&调色板设置设置工具箱配置根据项目的组件添加调色板由于我的项目中使用的是...React, { useCallback } from 'react'; import Button from 'antd/es/button'; import { useForm } from 'antd

6941 0

点击加载更多

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

大厂都在用 @tanstackreact-query 到底有多好用！

react-query从拒绝到拥抱

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

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

python使用retrying重试请求

urql实现GraphQL的react客户端

React 查询：无限滚动

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

GraphQL在现代Web应用中的应用与优势

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

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

关于微信支付-商户平台:查询订单提示“查询失败:操作失败，请稍候重试”的分析

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

Nest 实现 GraphQL 版 TodoList

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

Pinia党福音，Pinia伴侣：pinia-colada

Redux 真的被高估了吗？我在大型项目中发现的真相

海量交易订单查询没做“重试”，一哥们“喜提”P3故障！

使用React Buddy辅助React开发

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐