React useQuery同组件双请求其一响应data为undefined

问题和useQuery并行请求能力无关，出在你的接口封装写法上：

• getUserInfo 用的是箭头函数省略大括号的简写形式，会隐式返回CobAPI.get()生成的Promise，useQuery可以正常拿到响应结果
• getUserStatistics 用大括号包裹了函数体，没有写return语句返回请求Promise，函数执行后默认返回undefined。哪怕浏览器Network面板能看到接口请求成功返回了数据，但是传给useQuery的查询函数没有拿到返回值，最终userStatisticsResponse.data自然是undefined。

给getUserStatistics补全return即可，两种写法都可以：

1. 保留大括号，显式return：

export const getUserStatistics = (userId: string, quarter: number) => {
  return CobAPI.get<UserStatisticsResponse>(`/users/statistics/${userId}/${quarter}`);
};

2. 改成和getUserInfo一致的简写形式，隐式返回，避免后续再漏写return：

export const getUserStatistics = (userId: string, quarter: number) =>
  CobAPI.get<UserStatisticsResponse>(`/users/statistics/${userId}/${quarter}`);

React Query原生支持同一组件内并行调用多个useQuery，只要每个请求的queryKey唯一，就不会出现互相覆盖的问题。修复后如果需要确认取值是否正常，可以在useQuery的查询函数内加日志校验：

const userStatisticsResponse = useQuery(
  ["statistics", userId, quarter],
  ({ queryKey }) => {
    const result = getUserStatistics(queryKey[1] as string, queryKey[2] as number)
    console.log('查询函数返回值', result)
    return result
  }
);

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