How to fetch data from Web API using React query?

在使用 React Query 从 Web API 获取数据时，我们通常会用到几个核心的概念和步骤，主要包括配置、创建查询和使用查询结果。下面我将详细介绍这个过程。

步骤 1: 安装和配置 React Query

首先，需要在你的 React 项目中安装 React Query 库。可以通过 npm 或 yarn 来进行安装。

bash
npm install react-query
# 或者
yarn add react-query

安装完成后，需要在你的应用顶层组件中设置一个 QueryClientProvider，并通过 QueryClient 实例来配置它，以便在整个应用中提供 React Query 的环境和配置。

javascript
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用组件 */}
    </QueryClientProvider>
  );
}

步骤 2: 创建查询

React Query 使用 useQuery 钩子来创建网络请求。这个钩子需要至少两个参数：一个唯一的键（用于缓存和追踪查询状态）和一个异步函数（通常是从你的 API 获取数据的函数）。

假设我们有一个函数 fetchUser，它从一个 Web API 获取用户信息：

javascript
const fetchUser = async (userId) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

然后，你可以在组件中使用 useQuery 来进行数据的查询：

javascript
import { useQuery } from 'react-query';

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

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

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

步骤 3: 使用查询结果

在上面的 UserProfile 组件中，我们使用了几个来自 useQuery 的返回值：

• data：包含 API 请求成功返回的数据。
• error：包含请求失败时的错误信息。
• isLoading：一个布尔值，表示查询是否正在进行中。
• isError：一个布尔值，表示查询是否遇到错误。

这些返回值可以用来在组件内部控制渲染的不同状态，如加载中、错误处理以及最终数据的展示。

小结

通过 React Query，我们可以高效地从 Web API 获取数据，并且能够优雅地处理加载状态和错误，同时还能利用 React Query 的缓存和数据同步机制来提升应用的性能和用户体验。