Next.js中如何使用React Query发起GET请求？自定义Hook迁移报错求解

1 直接报错的根因修复 #

你遇到的TypeError: ... UseApiRequest is not a function报错是大小写不匹配导致的：

• 你自定义Hook导出的名称是小写开头的useApiRequest
• 报错日志里显示你导入/调用时写成了大写开头的UseApiRequest
  JS语法对大小写敏感，只需要把你调用时的导入语句、调用语句的首字母改成小写即可，示例：

// 导入时要和导出名称完全一致
import { useApiRequest } from '../hooks/useApiRequest';

// 调用示例
const { data, isLoading } = useApiRequest(headersUrl);

2 React Query版本代码的潜在问题修复 #

你当前写的React Query版本还有几个逻辑错误，需要一并修改：

2.1 Query Key 配置错误 #

你当前写死了Query Key为"bc"，会导致所有不同url的请求共用同一份缓存，完全不符合预期。需要把url作为key的一部分，保证每个请求对应独立的缓存、自动重新触发逻辑。

2.2 缺少必要状态返回 #

建议把加载、错误状态一并返回，方便调用侧处理加载态、错误提示场景。

2.3 外层必须包裹QueryClientProvider #

使用React Query前必须在应用根组件外层包裹Provider，否则所有useQuery调用都会报错，配置示例：

// 根组件（比如_app.tsx、main.tsx）
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的其他业务组件 */}
    </QueryClientProvider>
  )
}

2.4 修正后的完整Hook代码 #

import { HeaderToken } from "../services/api";
import { useQuery } from "react-query";
// 如果是v4及以上版本的React Query，导入改为 import { useQuery } from '@tanstack/react-query'

export const useApiRequest = (url: string) => {
  return useQuery(['apiRequest', url], async () => {
    // 如果你习惯用axios也可以保留，不用强制切换fetch
    const response = await fetch(url, {
      method: "GET",
      headers: {
        Authorization: `Basic ${HeaderToken}`,
        "Content-Type": "application/json",
      },
    });
    if (!response.ok) throw new Error(response.statusText);
    return response.json();
  });
};

3 调用侧使用建议 #

现在调用时可以直接拿到所有需要的状态：

const { data, isLoading, error } = useApiRequest(headersUrl);

if (isLoading) return <div>加载中...</div>
if (error) return <div>请求失败：{error.message}</div>
// 正常渲染data

内容的提问来源于stack exchange，提问作者FD3