如何基于条件使用TRPC的useQuery钩子调用服务器？

问题背景 #

需要实现一个组件：默认展示假数据，当用户选择指定配置后，通过TRPC调用服务器获取真实数据。之前的错误实现是在useEffect内部调用TRPC的useQuery钩子——这违反了React钩子必须在组件顶层调用的规则，而且useQuery本身并非异步函数，不能这样直接调用。

正确实现方式 #

TRPC的useQuery钩子内置了enabled选项，可以用来控制请求是否触发。结合这个选项，我们可以直接在组件顶层处理条件请求，同时维护假数据和真实数据的展示逻辑：

import { useDateStore } from './你的状态存储路径';
import { useState } from 'react';
import { api } from './你的TRPC API路径';

// 定义假数据
const fakeBudgetData: Budget = {
  // 你的假数据结构
};

export const BudgetComponent = () => {
  const { date } = useDateStore();
  const [config, setConfig] = useState<configDTO | undefined>(undefined);

  // 条件式触发TRPC请求
  const { data: serverBudget, isLoading } = api.dashboard.getBudgetById.useQuery(
    {
      id: config!.id, // enabled为true时config必然存在，所以用非空断言
      date: date,
    },
    {
      // 仅当非演示模式且config存在时，才发起请求
      enabled: !isDemo && !!config,
      // 错误处理
      onError: (err) => console.error('获取预算数据失败:', err),
    }
  );

  // 确定最终展示的数据：优先使用服务器返回的数据，否则用假数据
  const displayData = serverBudget ?? fakeBudgetData;

  return (
    <div>
      {/* 加载状态提示 */}
      {isLoading && <div>正在加载数据...</div>}
      
      {/* 渲染数据内容 */}
      <div>
        {/* 用displayData渲染你的UI */}
      </div>
    </div>
  );
};

核心要点说明 #

• 钩子使用规则：直接在组件顶层调用useQuery，符合React钩子的使用规范
• 请求控制：通过enabled选项精准控制请求时机，避免不必要的请求
• 数据逻辑简化：利用serverBudget ?? fakeBudgetData自动切换假数据/真实数据，无需额外维护useState来存储数据
• 状态管理：useQuery会自动处理数据缓存、重新请求（当config或date变化时，会自动触发新请求）
• 用户体验：通过isLoading状态展示加载提示，提升交互体验

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