How can I pass a query param as an argument with React Query?

当使用 React Query 来管理数据请求时，我们可以通过多种方式传递查询参数。React Query 主要通过 useQuery 钩子来从远程数据源获取数据，其中查询的键值和参数可以灵活定义。以下是如何使用 React Query 传递查询参数的具体步骤和示例：

步骤 1: 安装 React Query

首先，确保在项目中已经安装了 React Query。如果没有安装，可以通过 npm 或 yarn 来安装：

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

步骤 2: 设置查询函数

定义一个函数，该函数负责发起网络请求，可以使用 fetch 或者如 axios 的库来进行数据请求。例如，我们定义一个函数来获取用户数据，该函数接受一个用户 ID 作为参数：

javascript
const fetchUserById = 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();
}

步骤 3: 使用 useQuery 钩子传递参数

在组件中，使用 useQuery 钩子并将查询参数（在这个例子中是用户 ID）作为 useQuery 的键值的一部分传递。这样，React Query 可以根据不同的参数值缓存和管理不同的数据查询。

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

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

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

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

步骤 4: 在父组件中使用

在父组件中，你可以根据需要将用户 ID 作为 props 传递给 UserProfile 组件。

javascript
function App() {
  const userId = '123'; // 假设这是动态获取的用户 ID
  return <UserProfile userId={userId} />;
}

总结

通过将查询参数作为 useQuery 的一部分传递，React Query 能够有效地区分和缓存不同参数下的查询结果，从而优化性能并减少不必要的数据重新获取。这种方法不仅使得数据获取过程更加高效，还能提升整体的应用性能。