How can I access the React useQuery data result?

在使用 React Query 的 useQuery 钩子来获取数据时，可以通过解构其返回的对象来访问各种数据和状态。下面是如何操作以及一些示例：

使用 useQuery

首先，你需要确保已经安装了 react-query 库，并在你的组件中引入了 useQuery 钩子。

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

设置请求

你可以通过传递一个唯一的 key 和一个函数来发起请求。这个函数负责获取数据，通常是一个 API 调用。

javascript
const fetchPlanets = async () => {
    const response = await fetch('https://swapi.dev/api/planets/');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
};

const { data, error, isLoading, isError } = useQuery('planets', fetchPlanets);

访问数据和处理状态

通过上面的 useQuery 返回值，你可以访问以下几个重要的属性：

• data: 请求成功返回的数据。
• error: 请求失败时的错误信息。
• isLoading: 如果请求还在加载中，则为 true。
• isError: 如果请求出错，则为 true。

示例

假设你正在开发一个显示行星信息的应用，可以这样使用上面的代码片段：

javascript
function Planets() {
    const { data, error, isLoading, isError } = useQuery('planets', fetchPlanets);

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

    return (
        <div>
            <h2>Planets</h2>
            <ul>
                {data.results.map(planet => (
                    <li key={planet.name}>{planet.name}</li>
                ))}
            </ul>
        </div>
    );
}

在这个例子中，当 useQuery 正在获取数据时，会显示一个加载提示。如果出现错误，就会展示错误信息。请求成功完成后，会渲染一个包含行星名称的列表。

结论

使用 React Query 的 useQuery 钩子，可以非常方便地在 React 应用中发起异步请求并管理状态。通过解构返回对象，可以轻松地访问到请求的数据、状态以及错误信息，从而在 UI 中合理地展示这些信息。