How to create get request using React Query in NextJS

在使用 NextJS 结合 React Query 来发起 GET 请求的过程中，基本步骤如下：

1. 安装所需依赖

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

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

2. 设置 React Query

在你的 NextJS 项目中，通常在 _app.js 或 _app.tsx 文件中设置 React Query 的 Provider。这样可以确保你在应用的任何组件中都能使用 React Query 的功能。

jsx
import { QueryClient, QueryClientProvider } from 'react-query';

function MyApp({ Component, pageProps }) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

3. 创建并使用一个 Query

假设我们有一个 API，URL 为 https://api.example.com/data，我们想从这个 API 获取数据。我们可以在一个 React 组件中使用 useQuery 钩子来发起 GET 请求。

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

function FetchDataComponent() {
  const { data, error, isLoading } = useQuery('data', () =>
    fetch('https://api.example.com/data').then(res =>
      res.json()
    )
  );

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

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchDataComponent;

示例解释：

• useQuery 钩子的第一个参数是唯一的查询键（在这里是 'data'），React Query 用它来缓存和记住查询的状态。
• 第二个参数是一个异步函数，这里我们通过 fetch 发起 GET 请求并返回 JSON 响应。
• useQuery 钩子返回一个对象，其中包含 data、error 和 isLoading 等状态，你可以用这些状态来控制你的 UI 显示逻辑。

通过以上步骤，你就可以在 NextJS 项目中利用 React Query 来方便地管理服务器状态和缓存，提高应用性能和用户体验。