tanstack/react-query使用手册

怕冷的火焰（~杰）

已于 2024-05-29 16:07:56 修改

阅读量2.5k

点赞数 7

分类专栏： react-query 文章标签： react.js

于 2023-12-01 20:32:51 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/134743373

版权

react-query 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React应用中使用`useQuery`处理数据加载和状态管理，以及`useMutation`执行API调用和`useQueryClient`整合查询与更新操作。着重讲解了isLoading和isFetching的区别以及如何在操作成功后更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. useQuery

useQuery的使用

一、data是后端成功返回的数据， 第一次的值为undefined
二、isLoading是指数据是否正在加载的状态，通常用于判断请求是否还在进行中。当isLoading为true时，表示数据正在加载中，当isLoading为false时，表示数据加载完成。
三、isFetching是指数据是否正在进行更新的状态，通常用于判断数据是否正在进行更新操作，比如重新加载数据或者刷新数据。当isFetching为true时，表示数据正在进行更新操作，当isFetching为false时，表示数据更新操作完成。
isLoading和isFetching的区别在于，isLoading表示数据是否正在加载中，而isFetching表示数据是否正在进行更新操作。可以说isLoading是isFetching的子集，即当isFetching为true时，isLoading一定为true，但当isLoading为true时，isFetching不一定为true。

const {data, isFetching, isLoading} = useQuery({
    // queryKey的robotList可以认为是这个useQuery的身份识别，必须是唯一的，后面携带的参数是用来控制是否触发查询，如果条件不变则取缓存内的数据而不调用接口
    queryKey: ['robotList', curPage, pageSize],
    queryFn: () => ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})
});

2. useMutation

// mutate是用来触发这个方法，isPending是布尔值，true为正在调用中，false表示接口调用完成
const {mutate, isPending} = useMutation({
    mutationFn: () => services.fetchAddRobot({name: '机器人'}),
    onSuccess: resp => {
        // resp为后端返回值

    },
    onError: err => {
        console.err(err);
    }
})

3. useQueryClient(结合useQuery和useMutation一起使用)

import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query';

function App(props) {
    const client = useQueryClient();

    const {data, isFetching, isLoading} = useQuery({
        // queryKey的robotList可以认为是这个useQuery的身份识别，必须是唯一的，后面携带的参数是用来控制是否触发查询，如果条件不变则取缓存内的数据而不调用接口
        queryKey: ['robotList', curPage, pageSize],
        queryFn: () => ServiceWorkerRegistration.fetchRobotList({curPage: 1, pageSize: 20})
    });
    
    const {mutate, isPending} = useMutation({
        mutationFn: () => services.fetchAddRobot({name: '机器人'}),
        onSuccess: resp => {
            // resp为后端返回值
            if (resp.code === 8) {
                // 创建成功后重新查询
                client.invalidateQueries({
                    <!-- 上方提到的useQuery的身份识别用途之一就是这里，根据queryKey判断是否触发全部的useQuery，如果存在值就只触发对应的useQuery -->
                    queryKey: ['hello']
                })
            }
        },
        onError: err => {
            console.err(err);
        }
    })

    return (
        <div>展示用法</div>
    )    
}