在TanStack Query的useQuery中调用自定义Hook导致构建失败问题

问题原因 #

你写的useHttp虽然命名带use前缀，但它本质只是一个普通异步请求函数，没有使用任何React Hook（比如useState、useEffect），不符合React自定义Hook的定义。而React的Hook规则严格要求：Hook只能在React函数组件顶层或自定义Hook顶层调用，构建阶段的ESLint规则会严格校验这一点，所以即使开发服务器能正常运行，构建时会直接报错。

修复步骤 #

1. 把伪Hook重命名为普通函数，去掉use前缀，明确它的功能是数据请求
2. 确保函数内部捕获错误后重新抛出，让React Query能正确识别错误状态
3. 在useQuery的queryFn中直接调用这个普通异步函数

修正后的代码 #

异步请求函数

export async function fetchProducts({ signal }) {
  try {
    const url = "https://fakestoreapi.com/products";
    const response = await fetch(url, { signal });
    if (!response.ok) {
      throw new Error("Something went wrong");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
    throw error; // 重新抛出错误，让React Query捕获错误状态
  }
}

React Query调用代码

const { data, isPending, isError, error } = useQuery({
  queryKey: ["products"],
  queryFn: ({ signal }) => fetchProducts({ signal })
});

额外说明 #

• 自定义Hook必须满足两个条件：名字以use开头，且内部调用了其他React Hook。如果只是普通工具函数，不要用use命名，避免触发Hook规则校验。
• 原代码中useHttp捕获错误后没有重新抛出，会导致React Query认为请求始终成功，isError和error状态不会生效，所以修复时要补上throw error。

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