- 综合排序
- 最热优先
- 最新优先
- 来自专栏各类技术文章~
react-query从拒绝到拥抱
react-query是一位数据获取专家，能够智能管理请求的一切内容，包括数据、状态、缓存，更新等，基于Hooks。 的star数量 axios .get("https://api.github.com/repos/tannerlinsley/react-query") .then((res 下面来看看react-query是如何把这件事变成乐趣的。 import axios from "axios"; import { useQuery } from "react-query"; export default function App() { "; import { useQueryClient } from 'react-query'; import { ReactQueryDevtools } from "react-query/devtools
3.3K31编辑于 2021-12-08 - 来自专栏魔术师卡颂
React-Query：啥都没干，就被淘汰了？
作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。 但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？ 本文参考了文章You Might Not Need React Query[1] 前端缓存库的本质 React-Query的定位是「前端缓存库」。 所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。 总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。 把这个模型套在「数据同步」的场景： 之前，「数据同步」的逻辑主要发生在位于前端的React-Query中 现在，「数据同步」的逻辑发生在后端 既然「数据同步」的逻辑发生在后端，显然就不需要运行在前端的React-Query 没曾想，随着这些全栈框架的爆发，前端缓存库React-Query成为受伤最重的那个。 这就是所谓的 —— 毁灭你，与你何干。
43220编辑于 2023-08-30 - 来自专栏前端java
React-Query：啥都没干，就被淘汰了？
作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？ 所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。 所以，React-Query还是有用武之地。类似的，在全栈框架Next.js中，也推荐在CSR（客户端渲染）时使用同团队开发的缓存库SWR用于数据的同步操作。 图片把这个模型套在数据同步的场景：之前，数据同步的逻辑主要发生在位于前端的React-Query中现在，数据同步的逻辑发生在后端既然数据同步的逻辑发生在后端，显然就不需要运行在前端的React-Query 没曾想，随着这些全栈框架的爆发，前端缓存库React-Query成为受伤最重的那个。这就是所谓的 —— 毁灭你，与你何干。
70330编辑于 2023-05-27 - 来自专栏前端技术归纳
使用React-Query解决接口请求的麻烦事
React-Query React Query 是一个开箱即用，零配置的服务端状态管理库，支持Restful和GraphQL两种类型的请求，它能帮助你很好的获取、同步、管理和缓存你的远程数据。 React-Query的官方文档没有大纲，阅读起来相当不方便，个人感觉，直接阅读github源码项目中的docs要更方便一些。 ，除此之外，React-Query还有很多其他的能力。 最后 感谢你能看到这里，本文简单介绍了React-Query对服务端数据进行增删改查的功能实现，以及React-Query的一些其他能力，希望对你有用，React-Query的使用场景没有其他状态管理库那么广泛 笔者之后也会继续更新React-Query的其他使用场景，如果可以的话，不妨点个赞再走呢，这对我很重要。
2.1K30编辑于 2023-09-16 - 来自专栏魔术师卡颂
用react-query解决你一半的状态管理问题
这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。 你可以从这里[2]看到他们的区别 初识React-Query React-Query是一个基于hooks的数据请求库。 我们可以将刚才的例子用React-Query改写： import { useQuery } from 'react-query' function App() { const {data, 所以我们需要告诉React-Query，userData query对应的缓存已经失效，需要更新： import { useQuery, queryCache } from 'react-query'; 这样，React-Query就会重新请求userData对应query的数据。 总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。
3.2K10发布于 2021-03-15 - 来自专栏前端框架
大厂都在用 @tanstack/react-query 到底有多好用！
前言 最近参与新的项目了，发现项目居然使用了 @tanstack/react-query，以前之后简单介绍过，今天再来详细上手使用下！ @tanstack/react-query 往期精彩推荐 有了它，我放弃了 try-finally 代码块！ 原来在字节写代码就是这么朴实无华！ 更多精彩文章欢迎关注我的公众号 正文 @tanstack/react-query 是 TanStack 生态的一部分，专为 React、Vue 等框架设计，用于管理服务器状态和异步数据。 以下是 React Query 的详细使用过程 准备 pnpm add @tanstack/react-query 然后在根入口处使用 Provider! import React from"react"; import { QueryClient, QueryClientProvider } from"@tanstack/react-query"
93510编辑于 2025-09-15 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x6：实现用户认证和全局通知
除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求 每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用 由于身份验证是基于 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌 调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的 react-query 保护需要用户进行身份验证的资源 # 功能实现 # 登录 // src/features/auth/api/login.ts import { useMutation } from "@tanstack/react-query "; import { apiClient } from "@/lib/api-client"; import { queryClient } from "@/lib/react-query"; import "; import { apiClient } from "@/lib/api-client"; import { queryClient } from "@/lib/react-query"; export
2.5K30编辑于 2023-05-17 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x5：集成 API 到应用中
// src/lib/react-query.ts import { QueryClient } from "@tanstack/react-query"; export const queryClient "react-error-boundary"; import { theme } from "@/config/theme"; import { queryClient } from "@/lib/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 "; import { apiClient } from "@/lib/api-client"; import { queryClient } from "@/lib/react-query"; import
2K20编辑于 2023-05-17 - 来自专栏前端劝退师
React 中请求远程数据的四种方法
内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。 但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。 /services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo
2.8K30发布于 2020-07-24 - 来自专栏code秘密花园
React 中请求远程数据的四种方法
内联写法 集中管理 自定义 Hook react-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。 但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。 /services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo
4.6K10发布于 2020-07-24 - 来自专栏前端壹栈
使用React Query做为axios请求库的上层封装
举个例子： import React from "react"; import { useQuery, queryCache } from "react-query"; import ". export default function App() { return (
Shared state using react-query ，后面我再深入研究，先留个坑 参考文献 https://react-query.tanstack.com/quick-start https://github.com/tannerlinsley/react-query /discussions/489 https://github.com/tannerlinsley/react-query/discussions/329 https://tkdodo.eu/blog/
3.1K30发布于 2021-10-12来自专栏前端从进阶到入院React Query 指南，目前火热的状态管理库！
让我们看一个例子： import { useQuery } from '@tanstack/react-query'; const fetchTodos = async (): Promise<Todo 为了更好地在代码中理解突变是什么，让我们从一个代码片段开始 import { useMutation } from '@tanstack/react-query'; const postTodo = 以下是一个例子 import { useMutation, useQueryClient } from '@tanstack/react-query'; import { QUERY_KEY } from /react-query/client'; import Router from '. 可以使用一个名为 useSignOut 的自定义 hook 来构建它；它的实现很简单，如下所示： import { useQueryClient } from '@tanstack/react-query
6.8K42编辑于 2023-05-23来自专栏前端框架告别复制粘贴，这个高效的 Vite 插件让我摸鱼时间更充足了！
仓库地址：https://github.com/mmdctjj/vite-plugin-swagger-mcp 往期精彩推荐 大厂都在用 @tanstack/react-query 到底有多好用！ 往期精彩推荐 大厂都在用 @tanstack/react-query 到底有多好用！ 有了它，我放弃了 try-finally 代码块！ 原来在字节写代码就是这么朴实无华！
36510编辑于 2025-09-15来自专栏前端框架Node.js v24.7.0 新功能预览
大厂都在用 @tanstack/react-query 到底有多好用！ 有了它，我放弃了 try-finally 代码块！ 大厂都在用 @tanstack/react-query 到底有多好用！ 有了它，我放弃了 try-finally 代码块！ 更多精彩文章欢迎关注我的公众号
26010编辑于 2025-09-15来自专栏Cellinlab's BlogReact 设计模式 0x6：数据获取
# 安装 npm install react-query # 使用 import React from "react"; import { useQuery, QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); function Demo() { const { isLoading , error, data } = useQuery("repoData", () => fetch("https://api.github.com/repos/tannerlinsley/react-query
2.4K20编辑于 2023-05-17); } 无限滚动（Infinite Scroll） // "滚动加载更多"式分页 import { useInfiniteQuery } from'@tanstack/react-query ❌ 没有 ✅ 官方工具 第八部分：生产级的React Query配置 // react-query-config.js import { QueryClient } from'@tanstack/react-query来自专栏前端达人2026年React数据获取的第六层：从自己写缓存到用React Query——减少100行代码的秘诀
useQuery({ queryKey: ['users', page] }); // 不同page自动独立缓存 第二部分：React Query基础 安装和初始化 npm install @tanstack/react-query // main.jsx import { QueryClient, QueryClientProvider } from'@tanstack/react-query'; const queryClient </QueryClientProvider> ); } 你的第一个Query // hooks/useUsers.js import { useQuery } from'@tanstack/react-query
16410编辑于 2026-03-12 - 来自专栏哈德森博客
Pixer v6.5.0 – React Laravel 电子商务多供应商数字市场
它非常容易使用，我们使用了axios和react-query来获取数据。您可以非常轻松地设置 API 端点，并且您的前端团队会喜欢使用它。它具有 REST API 支持。
46810编辑于 2024-05-16 - 来自专栏前端框架
Rspack 1.5 版本更新速览！
大厂都在用 @tanstack/react-query 到底有多好用！
29610编辑于 2025-09-15 - 来自专栏Java开发
Java 学生信息管理系统基于 Spring Boot 3 与 React 实操指南开发教
：// src/api/studentApi.tsimport axios from 'axios';import { useQuery, useMutation } from '@tanstack/react-query /StudentList';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';test('renders
37210编辑于 2025-07-18 - 来自专栏小丞前端库
Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块
这个属性可以控制是否强制渲染，这也是为了解决，我们在刚打开时，组件未渲染导致报错的问题 同时我们也可以发现，我们在当中设置了三元判断，这样是为了优化我们的用户体验，前面也提过了，我们整个项目采用的是 react-query 这其实利用的是 useMutation 这个 react-query 中的原生 hook // 示例 return useMutation( (params: Partial<Project>) -- 那么这部分的内容就到这里了，下一篇将会讲关于搜索部分的实现~ 总结 通过这篇文章我们可以学会以下这些内容 在 antd 组件的基础上封装新的组件 采用乐观更新优化体验 项目的增删查功能 采用 react-query
1.5K30发布于 2021-10-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号