乐闻世界logo
搜索文章和话题

How to create get request using React Query in NextJS

6 个月前提问
5 个月前修改
浏览次数70

1个答案

1

在使用 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 钩子返回一个对象,其中包含 dataerrorisLoading 等状态,你可以用这些状态来控制你的 UI 显示逻辑。

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

2024年6月29日 12:07 回复

你的答案