react-query 是一个强大的数据获取库，它允许你获取、缓存、同步和更新服务器状态

37 min read

react-query 是一个强大的数据获取库，它允许你获取、缓存、同步和更新服务器状态，无需编写大量的引导和状态管理代码。以下是一个使用 react-query 的简单案例：

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

const fetchUsers = async () => {
  const res = await axios.get('https://jsonplaceholder.typicode.com/users');
  return res.data;
};

const Users = () => {
  const { data, status } = useQuery('users', fetchUsers);

  if (status === 'loading') {
    return <span>Loading...</span>;
  }

  if (status === 'error') {
    return <span>Error :(</span>;
  }

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

export default Users;

在这个示例中，我们定义了一个 Users 组件，该组件使用 useQuery 钩子从 https://jsonplaceholder.typicode.com/users URL 获取用户数据。

useQuery 的第一个参数是查询的键，它在全局查询缓存中必须是唯一的。第二个参数是异步函数 fetchUsers，该函数使用 axios 发起 HTTP GET 请求获取用户数据。

useQuery 返回一个对象，包含状态信息和数据。在这个例子中，我们根据 status 的状态来决定渲染的内容。如果状态是 loading，则显示 "Loading..."。如果状态是 error，则显示 "Error :("。如果请求成功，状态将变为 success，我们就可以渲染用户数据了。

react-query 库还提供了许多其他功能，如数据的自动更新、分页和排序、数据的预取和懒加载等。

以下是一些具体的示例：

  1. 数据的自动更新：react-query 通过 refetchInterval 选项，可以定期自动重新获取数据。例如，如果你想每 5 秒刷新一次数据，可以这样做：
const { data } = useQuery('todos', fetchTodos, {
  refetchInterval: 5000,
});
  1. 分页：react-query 提供了 usePaginatedQuery 钩子，可以在获取数据时进行分页。例如，如果你的 API 支持分页，你可以这样使用：
const { resolvedData } = usePaginatedQuery(['todos', page], fetchTodos);
  1. 数据排序：你可以将排序参数作为查询键的一部分，然后在获取函数中使用这些参数。例如：
const { data } = useQuery(['todos', { sortBy: 'date' }], fetchTodos);

在 fetchTodos 函数中，你可以根据 sortBy 参数来排序结果。

  1. 数据预取：react-query 提供了 prefetchQuery 函数，可以在背景中预先获取数据，以便在用户需要时立即显示。例如：
queryClient.prefetchQuery('todos', fetchTodos);

然后，当你使用 useQuery('todos', fetchTodos) 时，如果数据已经预取并且仍在缓存中，那么 react-query 将立即返回这些数据，而不是发出新的请求。

  1. 懒加载：react-query 提供了 useLazyQuery 钩子，允许你在需要时手动触发查询，而不是在组件渲染时自动执行。例如：
const [fetchTodo, { data, isLoading, error }] = useLazyQuery(fetchTodo);

然后，你可以在事件处理器中调用 fetchTodo 来触发查询。例如，在按钮点击事件中：

<button onClick={() => fetchTodo(todoId)}>Load Todo</button>

以上就是 react-query 的一些高级功能示例。更多详细信息和示例，你可以查看 react-query 的官方文档。