Hooks for fetching, caching and updating asynchronous data in React
Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts
Visit react-query.tanstack.com for docs, guides, API and more!
Still on React Query v2? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/.
Quick Features
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- React Suspense + Fetch-As-You-Render Query Prefetching
- Dedicated Devtools
- (depending on features imported)
Become a Sponsor!
Contributors
✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
-
前言 本文为 react-query 进阶高级技巧，适合对 react-query 已经熟练使用的人，关于 react-query 基础内容本文将不会再提，高阶读友可放心阅读。 假如你是零基础者，以下历史文章可供追溯： 《 React Api请求最佳实践react-query3使用教程（比swr更好用更强大）》 通过本文你可以对 react-query 形成一个初步认识，但接触面不会超过 50%
-
React Query 概览 React Query 通常被描述为 React 缺少的数据获取(data-fetching)库，但是从更广泛的角度来看，它使 React 程序中的获取，缓存，同步和更新服务器状态变得轻而易举。 在下面的例子中，你可以看到 React Query 以其最基本和简单的形式被用来获取 GitHub 项目本身的 React Query 的统计信息: import { Que
-
前言 在 react-query 入门文章： 《 React Api 请求最佳实践 react-query 3 使用教程（ 比 swr 更好用更强大 ）》 中，我们学会了 react-query 的基本使用。 我们注意到两个点： react-query 有全局的实例，可以管理全局的请求和数据，缓存就是在全局管理的，不论在哪个组件，存在 任意性 缓存是可以自由设定过期时间，当新鲜度 staleTim
-
问题 最近检查配置的时候，发现在webpack中有一段配置 module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015','react'] } }]
-
js部分 Es6定义变量 constructor(props){ super(props); this.state={ list:[], inputValue:'' } } 赋值 this.setState({ list:[...this.state.list,this.state.in
-
在逛github时，发现一个项目中的某个组件写的特别好，想引进我们的项目。 但是我们的项目是vue，这个组件是用react写的，也不想重新写一遍，可以使用react-to-vue工具来进行转译。 react-to-vue 转换的效果真的很好 npm install react-to-vue -g Usage: rtv [options] file(react component) Options
-
参数传递方 import React from 'react'; import { history } from 'umi'; const Sending: React.FC = () => { // 跳转页面 handleClick: (record: any) => { history.push({ pathname: '/页面路径/Detail/',
-
此篇文章是基于 react路由系列01___ 在react脚手架里使用React-router(简单入门)和 react路由系列02___ 二级路由 上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。 react路由传参（组件之间传值）_通过query React路由传参的三种方式： 二、通过query（以GoodsList.js为例） 解释：组件之间传递参数时
-
让查询知道您希望在发生某些错误后重新呈现时再次尝试 (1)错误边界组件使用react-error-boundary cnpm install -D react-error-boundary import { ErrorBoundary } from 'react-error-boundary' (2)使用reset处理查询错误 方式一:当使用组件时,它将重置组件边界内的任何查询错误
-
reacttraining.com/react-route… React Router does not have any opinions about how your parse URL query strings. Some applications use simple key=value query strings, but others embed arrays and objects
-
get请求 静态数据 不方便修改，而且只能通过本页面进行修改 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script crossorigin src="https://unpkg.com/react@16/
-
解决思路：用 isFetching 代替 isLoading 可以使用 isFetching 属性来代替 isLoading 属性来监听查询是否正在获取数据。isFetching 属性是 React Query 提供的另一个属性，用来表示当前查询是否正在获取最新数据。当调用 invalidateQueries 方法时，它会将查询的 isFetching 属性设置为 true，表示当前查询正在获取最
-
使用场景： 在进行接口调用的时候，我们需要异步获取数据，在没有useQuery时，需要频繁使用hooks中的usestate和useEffect，代码量很大很复杂。 使用useQuery能够大大减轻我们获取异步接口数据的代码负担。 Query results by default are structurally shared to detect if data has actually ch
-
原文：https://reactjs.org/docs/forms.html#why-select-value 在HTML中<select>用来创建下拉框,例如： <select> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option selected valu
-
URL的查询字符串 /foo?bar=baz ，可以用 this.props.location.query.bar 获取。
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是