关于react-query中useQuery的使用

1. 安装 React Query

首先，你需要安装 React Query。在你的项目中，通过 npm 或 yarn 来安装它

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

2. 设置 React Query

React Query 需要一个 QueryClient 实例来管理查询的状态。你通常会在你的应用的顶层（如 App.js 或 index.js）中创建一个 QueryClient 实例，并使用 QueryClientProvider 包裹你的应用。

import React from 'react'; 
import { QueryClient, QueryClientProvider } from 'react-query'; 
const queryClient = new QueryClient(); 
function App() { 
    return ( 
        <QueryClientProvider client={queryClient}> {/* 你的组件树 */} </QueryClientProvider> 
    ); 
} 
export default App;

3. 使用 useQuery

现在，在你的组件中，你可以使用 useQuery 来执行异步查询了。你需要提供一个异步函数来执行你的数据获取逻辑（这可以是一个 API 调用），以及一个可选的查询键（key）来唯一标识这个查询。

import React from 'react';  
import { useQuery } from 'react-query';  
  
// 假设你有一个从 API 获取数据的函数  
async function fetchTodos() {  
  return fetch('https://jsonplaceholder.typicode.com/todos')  
    .then(response => response.json());  
}  
  
function TodoList() {  
  // 使用 useQuery Hook 执行查询  
  const { isLoading, error, data } = useQuery('todos', fetchTodos);  
  
  if (isLoading) return <p>Loading...</p>;  
  if (error) return <p>Error: {error.message}</p>;  
  
  return (  
    <ul>  
      {data.map(todo => (  
        <li key={todo.id}>{todo.title}</li>  
      ))}  
    </ul>  
  );  
}  
  
export default TodoList;

在这个例子中，useQuery 接收两个参数：查询键（'todos'）和一个返回 Promise 的函数（fetchTodos）。useQuery 会自动处理这个 Promise，并在数据加载时更新组件的状态。

4. 处理查询结果

useQuery 返回一个包含多个属性的对象，这些属性可以帮助你处理查询的生命周期和结果：

• isLoading: 一个布尔值，表示查询是否正在加载中。
• isError: 一个布尔值，表示查询是否出错。
• error: 如果查询出错，则包含错误信息。
• data: 查询返回的数据。
• refetch: 一个函数，用于重新触发查询。
• isFetching: 一个布尔值，表示查询是否正在请求数据（包括初始加载和重新请求）。
• isStale: 一个布尔值，表示查询的数据是否已过时（根据 staleTime 选项）。