useQuery介绍

useQuery 是 React Query 库中的一个 Hook，用于在 React 组件中简洁地获取和管理数据。React Query 提供了强大的数据同步和缓存功能，简化了异步数据获取的流程，并提升了用户体验。以下是对 useQuery 的详细介绍：

安装 React Query

首先，需要安装 React Query 库：

npm install react-query

或者使用 yarn：

yarn add react-query

基本使用

useQuery 是一个 Hook，它接受一个唯一的查询键（key）和一个异步函数，该函数负责获取数据。示例如下：

import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';

const fetchUser = async (userId) => {
  const { data } = await axios.get(`https://api.example.com/users/${userId}`);
  return data;
};

const User = ({ userId }) => {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};

export default User;

主要参数和返回值

useQuery Hook 接受两个主要参数：

1. queryKey（查询键）：用于唯一标识查询，可以是字符串或数组。通常包含查询相关的信息，例如查询名称和参数。
2. queryFn（查询函数）：一个异步函数，返回要获取的数据。这个函数会在组件挂载时和需要重新获取数据时调用。

返回值包含多个属性，用于处理数据、加载状态和错误状态：

• data：获取到的数据。
• error：发生错误时的错误对象。
• isLoading：数据是否正在加载。
• isError：是否发生了错误。
• isSuccess：数据是否成功获取。
• refetch：手动触发数据重新获取的函数。

示例：高级用法

自动重试

React Query 支持自动重试失败的请求。可以通过配置 retry 和 retryDelay 选项来实现：

const { data, error, isLoading } = useQuery(
  ['user', userId],
  () => fetchUser(userId),
  {
    retry: 3, // 重试次数
    retryDelay: 1000, // 重试延迟
  }
);

缓存和刷新

React Query 会自动缓存数据，并在特定情况下刷新数据。可以通过配置 staleTime 和 cacheTime 来控制缓存行为：

const { data, error, isLoading } = useQuery(
  ['user', userId],
  () => fetchUser(userId),
  {
    staleTime: 10000, // 数据在10秒内被认为是新鲜的
    cacheTime: 60000, // 数据在缓存中保留60秒
  }
);

分页和无限加载

对于分页和无限加载，可以使用 useInfiniteQuery Hook：

import { useInfiniteQuery } from 'react-query';

const fetchUsers = async ({ pageParam = 1 }) => {
  const { data } = await axios.get(`https://api.example.com/users?page=${pageParam}`);
  return data;
};

const Users = () => {
  const {
    data,
    error,
    isLoading,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery('users', fetchUsers, {
    getNextPageParam: (lastPage, pages) => lastPage.nextPage,
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data.pages.map((page) =>
        page.users.map((user) => <div key={user.id}>{user.name}</div>)
      )}
      {hasNextPage && <button onClick={() => fetchNextPage()}>Load More</button>}
    </div>
  );
};

总结

useQuery 是一个强大的 Hook，简化了 React 应用中的数据获取和管理。通过它，开发者可以轻松地处理数据加载状态、错误处理、自动重试、缓存和刷新等功能，从而提升用户体验和开发效率。