使用react-query (useQuery)处理故事簿获取错误 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

前言最近参与新的项目了，发现项目居然使用了 @tanstack/react-query，以前之后简单介绍过，今天再来详细上手使用下！...它无需全局状态库，就能处理数据获取、缓存、突变和同步，支持 TS/JS，并提供开发工具。...以下是 React Query 的详细使用过程准备 pnpm add @tanstack/react-query 然后在根入口处使用 Provider!...请求数据 useQuery 用于数据获取，支持自动缓存、重取和错误处理！...tanstack/react-query"; import axios from"axios"; // 模拟获取待办列表 const fetchTodos = () => axios.get("/api

5161 0

react-query从拒绝到拥抱

其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...res) => { setstarCount(res.data.stargazers_count); }) .catch((err) => { //处理错误...设为false setstarCount(res.data.stargazers_count); }) .catch((err) => { //处理错误...}颗星 ); } 复制代码在这里使用useQuery，此刻这个请求拥有了自动获取数据，管理请求状态，错误重试，窗口焦点自动获取数据，缓存等，它的第1个参数是一个唯一的key，名字有意义就好...最后它会返回一个结果，结果里面包含请求的数据，加载状态，错误等，这样这个请求就把所有这些状态串联起来，而不是一堆散乱的状态，突然逻辑变得清晰了，你只需要根据这些状态处理页面，一切都简单了。

3.2K3 1

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

是的

没有找到

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

”，“useQuery”不会触发，需要使用其返回的“refetch”来触发操作 queryFn：全局定义请求方法，其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query...除此之外，使用useQuery拉取回来的数据，会被默认缓存起来，然后可以通过配置过期时间，重新拉取等策略来进行管理。...useMutation 除了获取数据，很多时候还需要处理数据的修改，比如说最简单的todo list例子，除了拉取数据列表，还需要增删改数据，而这个时候除了需要发送接口，还需要修改本地的数据，React-Query...最后感谢你能看到这里，本文简单介绍了React-Query对服务端数据进行增删改查的功能实现，以及React-Query的一些其他能力，希望对你有用，React-Query的使用场景没有其他状态管理库那么广泛...笔者之后也会继续更新React-Query的其他使用场景，如果可以的话，不妨点个赞再走呢，这对我很重要。

1.8K3 0

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

你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...error：此对象包含请求存在问题的错误；通过使用它，你可以获取错误并为用户创建漂亮的信息提示。...用于处理成功和错误 hooks 的选项，但也用于配置突变（重试、重试延迟等）。...结果有三个主要的对象： mutate：这是在你的代码中运行突变的操作 isLoading：这个标志表示突变是否正在进行 error：这表示如果请求出现错误，则显示错误在 React 应用程序中使用突变...现在使用 useSignUp hook，你可以获取 mutation 并调用 signUp 请求在你的系统中创建新用户。

6.4K4 2

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

我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...useQuery 钩子来处理这些事情： import { useQuery } from "@tanstack/react-query"; const loadData = () => Promise.resolve...，消费者不需要担心存储数据或处理加载和错误状态；一切都由 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

2K2 0

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

这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。...我们可以将刚才的例子用React-Query改写： import { useQuery } from 'react-query' function App() { const {data,...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...这样，React-Query就会重新请求userData对应query的数据。总结通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。...这为我们带来很多好处：使用通用的hook处理请求中间状态多余请求合并针对缓存的更新/失效策略 Redux等「全局状态管理方案」可以更专注于「前端中间状态」处理参考资料 [1] SWR: https

3.1K1 0

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

内联写法集中管理自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。...但是这个示例忽略了加载状态，错误处理，声明和设置相关状态等。在现实世界中， HTTP 调用看起来更像这样。...、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？你可以不断完善这个自定义Hook来完成所有这些操作。...但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

4.5K1 0

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

2.7K3 0

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

cookie 的，带有 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的.../auth"; 另外，在 src/pages/dashboard/jobs/index.tsx 中，我们将使用 useUser hook 来获取用户数据： // src/pages/dashboard...为了处理全局状态，我们将使用 Zustand，这是一个轻量级且非常简单易用的状态管理库。...- ... --> ); }; export default DashboardCreateJobPage; 提交成功后可以看到通知：另一个可以利用通知的地方是 API 错误处理...每当发生 API 错误时，我们希望让用户知道发生了错误。我们可以在 API Client 别处理它。由于 Axios 支持拦截器，而且我们已经对其进行了配置，因此我们只需要修改响应错误拦截器即可。

2.1K3 0

React 设计模式 0x6：数据获取

这将使它们在将来需要的任何地方都可以使用，无论是用于 Service Worker、缓存 API 还是其他处理或修改请求和响应的类似功能，或者任何可能需要您编写程序来生成响应的地方。...此外，您可以获取数据并将其存储在 React 应用程序状态中。 # React Query React Query 是一个库，用于处理 React 应用程序中的数据获取和管理。...通过使用 React Query，开发者可以快速地处理数据获取和管理，同时保持 React 应用程序的高性能和可伸缩性。...# 安装 npm install react-query # 使用 import React from "react"; import { useQuery, QueryClient, QueryClientProvider..., error, data } = useQuery("repoData", () => fetch("https://api.github.com/repos/tannerlinsley/react-query

1.9K2 0

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

前言在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到axios这个库来做请求，嗯，毕竟拥有80k star,明星项目接下来，我们来回顾下axios在项目中的使用以查询用户信息为例，我们会这样封装...另外，现在的前端项目特别是单页面应用，会使用Flux、Redux、Mobox等状态管理库，会把组件间共享的数据都存放在状态管理库中，这些可以分为两类，一类是用户交互的中间状态,比如isLoading,isClose...接下来，就是引出今天的主角 React Query React Query React Query 通常被描述为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看...，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。...举个例子： import React from "react"; import { useQuery, queryCache } from "react-query"; import ".

3K3 0

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

// ❌ 错误的思维方式 const [products, setProducts] = useState([]); // 你在欺骗应用：这里放的是真实的数据 // 但实际上这只是上次从API获取到的数据快照...useEffect地狱的具体表现这个根本认知错误衍生出一份无穷的TODO清单，所有这些问题都得手工处理：加载和错误状态管理：需要额外的isLoading、isError、isSuccess等状态来追踪请求的各个阶段...After: TanStack Query的声明式写法 import { useQuery } from'@tanstack/react-query'; asyncfunction fetchProductsByCategory...直接使用缓存，不会闪加载中 ✅ 智能刷新：5分钟内数据被认为是新鲜的，不会重新请求；超过5分钟后会后台刷新 ✅ Tab激活刷新：用户从其他Tab回来时会自动检查数据是否需要更新 ✅ 没有竞态条件：内部自动处理了请求的顺序问题...import { useMutation, useQuery, useQueryClient } from'@tanstack/react-query'; function useTodos() {

1851 0

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

接下来我们将来处理看板部分的展示知识点抢先看封装 KanbanColumn 来布局页面编写大量的 custom hook 来处理看板数据对 useQuery 有进一步的了解利用 filter...[1] return Number(id) } 3. useProjectInUrl 有了我们的 projectId ，我们就可以使用通过它来获取我们的项目数据，这样我们就能获取到我们的项目的名称...，显示到页面上 // 通过 id 获取项目信息 export const useProjectInUrl = () => useProject(useProjectIdInUrl()) 使用 const...useProjectIdInUrl() }) 5. useTasks 接着我们需要来获取 task 数据，也就是我们这个项目的任务数据和获取 kanban 数据一样，我们需要采用 useQuery 来处理...的用法对 modal 组件有了更多的了解了解了 react-query 能够优化请求次数

9204 0

为什么我不再用Redux了

我使用常规 JS、React Hooks 和 axios 实现了一个从服务器获取的简单 TODO 列表。...下面是使用 React Query 实现的相同示例： import React from "react"; import { useQuery } from "react-query"; import...一起使用，并使用异步调用来获取数据。...前端状态呢一旦你开始使用这些库，就会发现在绝大多数项目中 Redux 都太笨重了。处理完应用程序的数据获取 / 缓存部分后，前端几乎没有全局状态可处理。...可以使用 Context 或 useContext+useReducer 处理剩下的少量内容，代替 Redux 的作用。

3.4K2 0

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

在Child组件中，我们使用useSelector钩子从Redux store中获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...import React from 'react';import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query...在DataComponent中，我们使用useQuery钩子使用fetchData函数获取数据。它返回一个包含数据、isLoading和isError等属性的对象，用于处理加载和错误状态。...在加载时，我们显示加载消息；如果有错误，我们显示错误消息。...通过这个设置，React Query处理了服务器状态、缓存和数据获取的管理，使得更容易在React组件中跟踪、更新和显示服务器数据。

2.2K3 1

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

state return state } // 组件使用 const isOpen = useSelector(state => state.dropdown.isOpen) const dispatch...一个真实的重构故事我参与过一个电商平台的重构。原来是 Redux 全家桶。...状态爆炸（数据模型越来越复杂）维护地狱用 React Query 就对了： import { useQuery, useMutation } from'@tanstack/react-query'...// 获取商品列表 const { data: products, isLoading } = useQuery({ queryKey: ['products'], queryFn: () => api.getProducts...、重试、失败处理……你就写业务逻辑。

1471 0

Java 学生信息管理系统基于 Spring Boot 3 与 React 实操指南开发教

API客户端封装使用Axios和React Query：// src/api/studentApi.tsimport axios from 'axios';import { useQuery, useMutation...} from '@tanstack/react-query';const apiClient = axios.create({ baseURL: 'http://localhost:8080/api...: string) => { return useQuery({ queryKey: ['students', name], queryFn: () => apiClient.get.../StudentList';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';test('renders...技术扩展方向添加WebSocket实现实时通知集成Apache Kafka实现异步消息处理引入Elasticsearch提升搜索性能开发移动端React Native应用通过这个实操项目，你可以掌握Java

2801 0

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

，同时支持完全自定义 � 开箱即用的插件：一组可组合的函数，用于处理数据获取 TypeScript 支持：完全支持 TypeScript 小体积：基础大小约 2kb，完全支持 Tree Shaking...用于管理异步数据获取，支持缓存、加载状态和错误处理。...会自动重新获取数据 todoId.value = 2; ❝动态 key 的作用: 当 key 变化时，useQuery 会自动重新执行查询函数。...适合需要根据参数动态获取数据的场景（如分页、筛选、详情页等）。如果在分页的场景中使用时，可以使用 placeholderData 防止清空数据！...它返回一个可以在 Store 中使用的查询函数。

5161 0

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

还是会在 any 类型下获取属性，但由于没有类型提示，导致写错个单词，最终提示 Cannot read properties of undefined (reading 'xxx')？...最主要的是没有类型约束的情况下，非常容易出现访问某个对象属性不存在，js 开发者肯定经常遇到如下错误提示。...它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。...这是 tRPC 的一个特性：请求批处理，将同时发出的请求（调用）可以自动组合成一个请求。...tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query，你也可以到 tRPC React Query documentation 查看相关 hook。

4.1K5 1

使用 Fetch API 处理AI流式接口,实现在Web开发中前后端的数据交互与显示

=> { // 处理错误 }); 或者使用 async/await 语法： javascript async function fetchData() { try { const...(error) { // 处理错误 } } 1.2 Fetch 与传统 AJAX 的比较特性 Fetch API XMLHttpRequest 语法基于 Promise，更简洁回调函数...二、Fetch API 的详细使用 2.1 发起 GET 请求 GET 请求是最常见的请求类型，用于从服务器获取数据： javascript fetch('https://api.example.com...正确的错误处理对于健壮的应用至关重要： javascript async function fetchWithErrorHandling() { try { const response...： javascript import { useQuery } from '@tanstack/react-query'; function UserProfile({ userId }) {

9101 0

点击加载更多

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

react-query从拒绝到拥抱

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

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

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

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

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

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

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

React 设计模式 0x6：数据获取

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

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

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

为什么我不再用Redux了

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

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

Java 学生信息管理系统基于 Spring Boot 3 与 React 实操指南开发教

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

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

使用 Fetch API 处理AI流式接口,实现在Web开发中前后端的数据交互与显示

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐