结合Suspense与react-error-boundary，优化useQuery数据类型并移除loading返回

1. 解决数据类型含undefined的问题 #

开启suspense: true后，React Query会自动将data的类型推断为非undefined——因为Suspense会在数据加载完成前挂起组件，组件渲染时必然已有可用数据。如果你的类型仍包含undefined，检查这几点：

• 确认React Query版本在v3及以上（v4推荐使用@tanstack/react-query包）；
• 排查useQuery配置：不要同时设置enabled: false（这种情况下data会保持undefined），确保查询是自动触发的；
• 若使用TypeScript，检查是否正确导入了React Query的类型，避免类型推断异常。

2. 移除组件内的"...loading"返回语句 #

用Suspense接管加载状态后，组件内完全不需要手动处理loading逻辑：

• 把业务组件包裹在<Suspense>中，通过fallback属性设置加载时的UI（比如...loading）；
• 删除组件内所有判断isLoading并返回loading UI的代码，React会自动在数据加载完成后渲染你的业务组件。

3. 规避ESLint "no-non-null-assertion" 冲突 #

完全不需要使用非空断言（!）——只要正确配置suspense: true，data的类型已经是明确非undefined的，直接使用即可。如果仍有类型提示异常，优先排查上述的版本或配置问题，而非强行用断言。
若确实有个别场景需要临时绕过ESLint，可在对应行添加注释：// eslint-disable-next-line no-non-null-assertion，但这是下策，优先保证类型推断正确。

4. HOC是否必要？ #

不需要额外写HOC。React Query的Suspense + 错误边界的组合已经足够简洁，直接用Suspense和错误边界包裹业务组件即可。如果想要封装通用的加载/错误处理逻辑，写一个简单的容器组件比HOC更符合React当前的组件模式。

示例代码 #

// 业务组件：无需处理加载、错误、数据undefined问题
import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {
  const res = await fetch('/api/data');
  return res.json();
};

const MyComponent = () => {
  const { data } = useQuery({
    queryKey: ['data'],
    queryFn: fetchData,
    suspense: true,
    useErrorBoundary: true,
  });

  // data类型已自动排除undefined，直接使用
  return <div>{data.content}</div>;
};

// 父组件：用Suspense和错误边界包裹
import { Suspense } from 'react';
import { ErrorBoundary } from './your-error-boundary-component';

const ParentComponent = () => {
  return (
    <ErrorBoundary fallback={<div>加载出错，请稍后重试</div>}>
      <Suspense fallback={<div>...loading</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

内容的提问来源于stack exchange，提问作者윤지만jimmy.im