组件挂载时无所需数据，如何使用tRPC Query加载指定对话？

针对你遇到的组件挂载时无法初始化第二个tRPC Query的问题，这里有几个实用的解决思路：

1. 用enabled参数控制查询执行时机 #

tRPC的useQuery支持通过enabled选项决定查询是否自动执行。你可以把第二个查询的启动条件设置为所需数据（比如选中的对话ID）存在时才触发：

const { data: conversations } = trpc.conversations.list.useQuery();
const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);

// 仅当选中对话ID存在时，才执行该查询
const { data: selectedConversation } = trpc.conversations.get.useQuery(
  { id: selectedConversationId! },
  { enabled: !!selectedConversationId }
);

// 对话列表点击事件
const handleConversationClick = (id: string) => {
  setSelectedConversationId(id);
};

组件挂载时，selectedConversationId为null，第二个查询不会执行；当你点击对话列表项更新ID后，查询会自动触发并加载对应对话数据。

2. 手动触发查询（通过queryClient） #

如果不需要自动查询，可以在点击对话时手动调用查询，同时借助tRPC的缓存机制避免重复请求：

const { data: conversations } = trpc.conversations.list.useQuery();
const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null);
const queryClient = useQueryClient();

const handleConversationClick = async (id: string) => {
  // 手动获取对话数据，结果会自动存入tRPC缓存
  const conversation = await queryClient.fetchQuery({
    queryKey: ['conversations', id],
    queryFn: () => trpc.conversations.get.query({ id })
  });
  setSelectedConversation(conversation);
};

这种方式完全由点击事件控制查询时机，从根源上避免了挂载时的依赖缺失问题。

3. 设置默认选中项（如果业务允许） #

如果你的场景需要组件挂载后自动加载第一个对话，可以监听对话列表的加载结果，自动将第一个对话ID设为选中值：

const { data: conversations } = trpc.conversations.list.useQuery();
const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);

// 对话列表加载完成后，自动选中第一个对话
useEffect(() => {
  if (conversations?.length) {
    setSelectedConversationId(conversations[0].id);
  }
}, [conversations]);

// 同样通过enabled控制查询执行
const { data: selectedConversation } = trpc.conversations.get.useQuery(
  { id: selectedConversationId! },
  { enabled: !!selectedConversationId }
);

这样当对话列表数据就绪后，会自动触发第二个查询，加载默认对话内容。

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