React的useQuery用法

useQuery 是 React Query 库中的一个自定义钩子函数，用于在 React 组件中进行数据查询。它提供了一种简化和统一数据查询逻辑的方式。下面是使用 useQuery 的基本步骤：

1. 安装 React Query 库：使用 npm 或 yarn 安装 React Query 库。

2. 导入必要的依赖：在需要使用 useQuery 的组件中，导入 useQuery 函数以及其他必要的依赖。

   import { useQuery } from 'react-query';

3. 定义查询函数：创建一个异步函数，用于执行实际的数据查询操作。这个函数将返回一个 Promise，用于从源（rest、GraphQL 等等）获取查询结果。

   const fetchData = async () => {
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     return data;
   };

4. 使用 useQuery 钩子：在组件中使用 useQuery 钩子来执行查询操作。

   const MyComponent = () => {
     const { isLoading, error, data } = useQuery('myData', fetchData);
   
     if (isLoading) {
       return <div>Loading...</div>;
     }
   
     if (error) {
       return <div>Error: {error.message}</div>;
     }
   
     return (
       <div>
         {/* 使用查询结果进行渲染 */}
         {data && data.map(item => <div key={item.id}>{item.name}</div>)}
       </div>
     );
   };

   在上述代码中，useQuery 函数接受两个参数：查询的唯一键（用于标识查询）和查询函数。它将返回一个包含 isLoading（表示查询是否正在进行）、error（表示查询错误）和 data（查询结果数据）等属性的对象。

在组件中，可以根据 isLoading、error 和 data 的状态进行相应的处理，如显示加载中状态、错误处理和渲染查询结果。

这是一个简单的示例，可以根据实际需求和查询接口进行自定义。使用 useQuery 可以轻松管理数据查询和状态，提供了方便的数据查询逻辑。