如何简化react-query中useInfo Hook的长数据路径调用（无依赖）

你可以直接在自定义的useInfo Hook内部完成深层数据的提取，将目标info作为单独字段返回，这样外部调用时就能直接访问，无需额外依赖。

修改后的Hook示例 #

import { useQuery } from 'react-query';

// 假设fetchInfoData是你的数据请求函数
const useInfo = () => {
  // 获取React Query的原始查询结果
  const queryResult = useQuery(['info'], fetchInfoData);
  
  // 从深层结构提取目标info，用可选链避免空值报错
  const info = queryResult.data?.data.payload.info;
  
  // 合并原始查询状态（如isLoading、error）和提取后的info返回
  return { ...queryResult, info };
};

外部调用方式 #

// 在组件中使用Hook
const { info, isLoading, error } = useInfo();

// 直接打印目标数据
console.log(info);

// 同时依然可以使用React Query的状态处理加载/错误逻辑
if (isLoading) return <div>加载中...</div>;
if (error) return <div>加载失败：{error.message}</div>;

如果你的场景只需要info和基础状态，也可以简化返回结构，但保留原始data和查询状态能兼容更多潜在需求。

内容的提问来源于stack exchange，提问作者김유경