Sapphire开发日志（六）——技术重难点1：React Query 的封装与在项目中的接入

React Query 的封装与在项目中的接入

React Query 是一个用于管理服务器状态的库，它简化了数据获取、缓存、同步和更新的过程。通过封装 React Query，我们可以更好地在项目中进行数据管理，提高代码的可维护性和可复用性。

安装和配置

首先，我们需要安装 react-query 及其所需的依赖项。

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

在项目的入口文件（如 index.js 或 App.js）中配置 React Query 的 QueryClient 和 QueryClientProvider。

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>,
  document.getElementById('root')
);

创建封装模块

为了简化数据请求和管理，我们可以创建一个封装模块。例如，我们可以创建一个 useFetchData 钩子。

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// 定义基础的 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 替换为实际的 API 地址
  timeout: 10000,
});

// 创建一个通用的数据获取钩子
const useFetchData = (key, url, options = {}) => {
  return useQuery(
    key,
    async () => {
      const { data } = await axiosInstance.get(url);
      return data;
    },
    options
  );
};

export default useFetchData;

在项目中接入

现在，我们可以在项目中使用我们封装的 useFetchData 钩子来获取数据。

import React from 'react';
import useFetchData from './hooks/useFetchData';

const UserList = () => {
  const { data, error, isLoading } = useFetchData('users', '/users');

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

示例代码

以下是一个完整的示例，包括如何使用 React Query 来获取用户数据并在组件中显示。

// hooks/useFetchData.js
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

const useFetchData = (key, url, options = {}) => {
  return useQuery(
    key,
    async () => {
      const { data } = await axiosInstance.get(url);
      return data;
    },
    options
  );
};

export default useFetchData;

// components/UserList.js
import React from 'react';
import useFetchData from '../hooks/useFetchData';

const UserList = () => {
  const { data, error, isLoading } = useFetchData('users', '/users');

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

// App.js
import React from 'react';
import UserList from './components/UserList';

const App = () => (
  <div>
    <h1>User List</h1>
    <UserList />
  </div>
);

export default App;

通过封装 React Query，我们可以简化数据获取和管理的过程，提高代码的可维护性和可复用性。在项目中接入 React Query 后，我们可以更方便地处理服务器状态，提供更好的用户体验。