React Query:高效管理API请求与缓存

React Query 是一个强大的状态管理库,专门用于处理数据获取、缓存和更新,尤其适合与 API 交互。它提供了许多高级特性,如自动缓存、离线状态管理、数据过期和重新获取等。

安装:

   npm install react-query

导入并配置 React Query:

在你的应用中,你需要导入 useQuery Hook 并设置配置对象。

   import { useQuery } from 'react-query';const queryClient = new QueryClient();

可以通过 QueryClientProviderqueryClient 包裹在你的根组件周围,以便在整个应用中使用。

   import { QueryClient, QueryClientProvider } from 'react-query';const queryClient = new QueryClient();function App() {return (<QueryClientProvider client={queryClient}>{/* Your application */}</QueryClientProvider>);}

使用 useQuery Hook:

使用 useQuery 来发起 API 请求并管理响应数据。

   function MyComponent() {const { data, status, error } = useQuery('myQueryKey', () => fetch('https://api.example.com/data'));if (status === 'loading') return 'Loading...';if (error) return 'An error occurred.';return <div>{data}</div>;}

这里,myQueryKey 是查询的唯一标识符,fetch('https://api.example.com/data') 是实际的 API 调用。

配置选项:

useQuery 接受一个配置对象,可以设置缓存策略、重试逻辑等。

   const { data } = useQuery('myQueryKey',() => fetch('https://api.example.com/data'),{staleTime: 60000, // 数据在多久后被视为过期并重新获取retry: 3, // 重试次数refetchOnWindowFocus: false, // 窗口聚焦时是否重新获取数据});

手动操作:

你可以手动触发数据的重新获取、取消或设置为错误状态。

   const { refetch, reset, isFetching } = useQuery('myQueryKey', fetchData);// 重新获取数据refetch();// 清除查询状态和数据reset();// 检查是否正在获取数据if (isFetching) console.log('Data is being fetched');

订阅更新:

你可以通过 useQuery 的返回值订阅查询状态变化。

   const { status, data, error } = useQuery('myQueryKey', fetchData);useEffect(() => {if (status === 'success') console.log('Data updated:', data);}, [status, data]);

分页:

React Query 支持分页,你可以通过 useInfiniteQuery Hook 实现无限滚动。

   import { useInfiniteQuery } from 'react-query';function MyInfiniteList() {const { data, isFetching, hasNextPage, fetchNextPage } = useInfiniteQuery('myInfiniteQuery',async ({ pageParam = 1 }) => {const response = await fetch(`https://api.example.com/data?page=${pageParam}`);return response.json();},{getNextPageParam: (lastPage) => lastPage.nextPageToken || false,});return (<div>{data.pages.map((page, index) => (<ul key={index}>{page.items.map(item => <li key={item.id}>{item.title}</li>)}</ul>))}{hasNextPage && !isFetching && (<button onClick={fetchNextPage}>Load More</button>)}</div>);}

这里,getNextPageParam 函数用于从上一页的响应中提取下一页的标识符。

缓存更新:

当 API 数据更新时,React Query 可以自动更新缓存中的数据,例如在使用 Mutation 时。

   import { useMutation } from 'react-query';const [updateItem] = useMutation(async (updatedItem) => {await fetch('https://api.example.com/items/' + updatedItem.id, {method: 'PUT',body: JSON.stringify(updatedItem),});});// 更新数据并自动刷新相关查询updateItem.mutate(updatedItem);

错误处理:

React Query 提供了内置的错误处理机制,你可以通过 error 属性来捕获错误。

   const { data, error } = useQuery('myQueryKey', fetchData);if (error) return <div>Error: {error.message}</div>;

查询缓存清理:

你可以根据需要清理特定查询的缓存。

    queryClient.removeQueries('myQueryKey'); // 清理所有匹配的查询queryClient.cancelQueries('myQueryKey'); // 取消匹配的查询

自定义中间件:

通过自定义中间件,你可以扩展 React Query 的功能,例如添加日志、性能监控等。

    import { QueryClient, QueryClientProvider } from 'react-query';const queryClient = new QueryClient({queryCache: new QueryCache({middlewares: [// 自定义中间件myCustomMiddleware,],}),});

预取数据(Prefetching):

React Query 允许你在组件渲染之前预取数据,提升用户体验。

    import { usePrefetch } from 'react-query';function MyComponent() {const prefetchData = usePrefetch('myQueryKey');useEffect(() => {// 在组件挂载时预取数据prefetchData();}, []);// ...其他逻辑}

乐观更新(Optimistic Updates):

在用户触发变更操作时立即更新 UI,然后再等待服务器确认,这能提供即时反馈,提升交互体验。

    import { useMutation } from 'react-query';const [updateTodo, { optimisticData }] = useMutation(updateTodoMutation, {onMutate: (newTodo) => {// 乐观地更新客户端缓存queryClient.setQueryData(['todos', newTodo.id], newTodo);return { previousTodo: queryClient.getQueryData(['todos', newTodo.id]) };},onError: (err, newTodo, context) => {// 如果发生错误,回滚到之前的值queryClient.setQueryData(['todos', newTodo.id], context.previousTodo);},onSettled: () => {// 查询已解决时,可以做清理工作queryClient.invalidateQueries('todos');},});function handleUpdate(todo) {updateTodo({ ...todo, completed: !todo.completed });}

并发控制:

有时,你需要控制同时运行的查询数量,特别是当调用多个 API 或有大量并发请求时。

    const { data } = useQuery(['concurrentQuery', { limit: 10 }], fetchItems, {staleTime: Infinity, // 防止数据过期自动重试refetchInterval: false, // 关闭自动轮询refetchOnWindowFocus: false, // 不在窗口聚焦时自动重试retry: false, // 失败时不重试useErrorBoundary: true, // 错误边界,避免组件树崩溃concurrency: 2, // 最大并发数});

依赖注入:

如果你的查询逻辑依赖于外部参数,可以通过 useQueries 来并行执行多个查询,每个查询可以有不同的配置。

    import { useQueries } from 'react-query';function MyComponent({ ids }) {const queries = useQueries(ids.map(id => ({queryKey: ['item', id],queryFn: () => fetchItem(id),})));return (<div>{queries.map(query => (<div key={query.queryKey[1]}>{query.isLoading ? 'Loading...' : query.data?.title}</div>))}</div>);}

React Query 的设计考虑到了现代 Web 应用的各种复杂场景,通过上述功能,开发者可以轻松实现数据管理和状态同步,同时保持应用的高性能和良好的用户体验。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RUST宏编程入门

宏指示符 在Rust的宏编程中&#xff0c;宏可以接受多种类型的参数&#xff0c;称为“指示符”。这些指示符帮助宏识别不同类型的代码片段&#xff0c;并相应地处理它们。 这里列出全部指示符&#xff1a; blockexpr 用于表达式ident 用于变量名或函数名itemliteral 用于字面常…

Internet Download Manager (IDM) 的优势

Internet Download Manager (IDM) 的优势 Internet Download Manager (IDM) 是一款流行的下载管理器&#xff0c;广泛用于加速和管理文件下载。以下是 IDM 的主要优势&#xff1a; 1. 下载加速 多线程下载&#xff1a;IDM 使用多线程技术&#xff0c;将下载的文件分成多个部…

【算法】合并两个有序链表(easy)——递归算法

题解&#xff1a;合并两个有序链表(easy)——递归求解 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 本题有两种解法&#xff0c; 一是用循环去处理 链接&#xff1a;【刷题记录】合并两个有序数组、移除元素二是用递归去处理 将在下面中说…

【面试题-005】Java中的类加载机制有哪些

文章目录 Java中的类加载器有哪些什么是双亲委派模型 Java中的类加载器有哪些 Java中的类加载机制是指Java虚拟机&#xff08;JVM&#xff09;将类文件&#xff08;.class文件&#xff09;加载到内存中&#xff0c;并对类进行解释和初始化的过程。类加载机制包括加载、链接&am…

树莓派通过PCA9685控制FT2331M舵机(Python)

很久之前整过PWM舵机&#xff0c;刚好最近师弟需要&#xff0c;并且网上现有教程不是很完整&#xff0c;就整理一下。方便交流以及后面回顾。 首先要明确&#xff0c;在这个控制方式中需要用到哪些方面&#xff1a; 1、树莓派与PCA9685之间使用I2C通信 2、PCA9685通讯协议 3…

Cachegrind和perf分析CPU缓存的对比

Cachegrind和perf分析CPU缓存的对比 在性能分析领域&#xff0c;尤其是CPU缓存性能分析方面&#xff0c;Cachegrind和perf是两种广泛使用的工具。本文将对这两种工具进行比较&#xff0c;帮助开发者选择最适合的工具进行性能优化。 文章目录 Cachegrind和perf分析CPU缓存的对比…

1. Mybatis基础操作

目录 1.1 需求 1.2 准备 1.3 删除 1.3.1 功能实现 1.3.2 日志输入 1.3.3 预编译SQL 1.3.3.1 介绍 1.3.3.2 SQL注入 1.3.3.3 参数占位符 1.4 新增 1.4.1 基本新增 1.4.2 主键返回 1.5 更新 1.6 查询 1.6.1 根据ID查询 1.6.2 数据封装 1.6.3 条件查询 1.6.4 参…

并发的三大特性

并发编程的三大特性是&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a; 原子性是指一个操作是不可中断的&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败。在多线程环境中&#xff0c;原子性操作可以防止多个线程同时修改共享资源时导致的竞态条…

C++ 变量的声明和初始化方式

下面是一些示例&#xff0c;展示了不同的初始化方式&#xff1a; double r(3.0); // 直接初始化 double s 3.0; // 复制初始化 double t{3.0}; // 列表初始化 (C11 起) 这三种方式都将创建一个 double 类型的变量&#xff0c;并将其初始化为 3.0。 这三种初始化方式在语…

Virtualbox中对SD卡进行格式化和分区

系统&#xff1a;Ubuntu 22.04.4 LTS 方法一&#xff1a;在虚拟机的ubuntu系统中使用fdisk命令方式分区&#xff0c;具体请参考&#xff1a; imx6ull - 制作烧录SD卡-CSDN博客 方法二&#xff1a;使用Ubuntu自带GUI工具Disks Disks相比命令行工具更加简单无脑&#xff0c;用…

架构师指南:服务注册发现工具全解析

1.介绍服务注册与发现的概念 1.1 微服务的挑战与服务发现的必要性 随着微服务架构的流行&#xff0c;一个应用可能被分解成多个服务单元&#xff0c;各个服务可能部署在不同的服务器上。服务之间需要相互通信&#xff0c;但是服务的位置可能频繁变动&#xff0c;这就需要一种…

Nginx配置详细解释:(1)全局配置

自启动安装nginx:前面博客有解释 systemctl stop firewalld setenforce 0 [rootNode1 ~]#:mkdir /data [rootNode1 ~]#:cd /data [rootNode1 data]#:yum -y install gcc pcre-devel openssl-devel zlib-devel openssl openssl-devel [rootNode1 data]#:wget http://nginx.o…

数据恢复大革新!EasyRecovery16版本带来UIUX及性能的重大提升

全球领先的数据恢复解决方案提供商Ontrack与其中国区总代理近日共同宣布&#xff0c;其广受欢迎的数据恢复软件EasyRecovery16迎来了重大更新&#xff0c;版本号提升至v16.0.0.5。这一更新为用户带来了一系列值得关注的新功能和改进&#xff0c;进一步巩固了EasyRecovery在数据…

Apache Calcite - 自定义标量函数

前言 上一篇文章中我们介绍了calcite中内置函数的使用。实际需求中会遇到一些场景标准内置函数无法满足需求&#xff0c;这时候就需要用到自定义函数。在 Apache Calcite 中添加自定义函数&#xff0c;以便在 SQL 查询中使用自定义的逻辑。这对于执行特定的数据处理或分析任务…

【蓝牙BR/EDR 操作概述】

基本速率/增强数据速率 (BR/EDR) 无线电&#xff08;物理层或 PHY&#xff09;在 2.4 GHz 的免许可 ISM 频段中运行。该系统采用跳频收发器来对抗干扰和衰落&#xff0c;并提供许多 FHSS 载波。基本速率无线电操作使用成形的二进制频率调制来最大限度地减少收发器的复杂性。符号…

1.1 OpenCV随手简记(一)

OpenCV学习篇 OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉库&#xff0c;它提供了大量的算法和函数&#xff0c;用于图像处理、计算机视觉和机器学习等领域。 1. OpenCV 简介 1.1 OpenCV 的起源和发展 OpenCV 项目始于 1999 年&#xff0c;由 In…

【火猫欧洲杯】意甲:孔蒂亲自推动,送走尼日利亚锋霸

本赛季那不勒斯作为卫冕冠军发挥不佳,联赛仅仅排在第10名,休赛期他们率先炒掉了主帅卡尔佐纳,基本上锁定了前国米主帅孔蒂。孔蒂对于执教那不勒斯也非常期待,根据意大利媒体爆料,孔蒂已经开始准备推动转会,将球队的进攻核心奥斯梅恩卖掉,如果可以他想将自己的爱将卢卡库换回来。…

java中中的泛型

文章目录 一、定义二、使用语法三、注意事项四、从泛型类派生子类情况一情况二 五、泛型接口语法接口的使用 一、定义 class 类名<泛型标识1,泛型标识2,…>{private 泛型标识1 变量名; }常用的泛型标识: T&#xff0c;E&#xff0c;K&#xff0c;V 二、使用语法 类名&l…

【数据结构与算法】中序遍历的非递归实现

回忆一下递归实现 /** /*** Definition for a binary tree node.* function TreeNode(val, left, right) {* this.val (valundefined ? 0 : val)* this.left (leftundefined ? null : left)* this.right (rightundefined ? null : right)* }*/ /*** param {T…

服务器环境搭建

服务器的使用。 本地服务器 虚拟机服务器 云服务器。 服务器配置内容 如何实现部署到云服务器&#xff1f; 环境部署是一件费劲的事。 自己一个人坚持慢慢弄&#xff0c;也能行。 但是要是一个组的人&#xff0c;问你怎么弄环境。 可就难了&#xff0c;不同的人部署的环境不同&…