React-Query v4中如何转换查询数据并进行类型映射？

1. 先定义包含新增属性的扩展类型 #

假设你的API返回的原始数据类型是User，要添加isActive和fullName两个属性，先写扩展接口：

interface User {
  id: number;
  firstName: string;
  lastName: string;
  status: string;
}

interface ExtendedUser extends User {
  isActive: boolean;
  fullName: string;
}

2. 给useQuery显式指定泛型参数 #

useQuery的泛型参数有固定顺序，把最终返回的扩展类型作为第一个参数，API原始返回类型作为第三个参数，TypeScript就能正确推导select的输入和输出类型：

const { data } = useQuery<ExtendedUser, Error, User, ['users']>(
  ['users'],
  () => fetch('/api/users').then(res => res.json()),
  {
    select: (rawUser) => ({
      ...rawUser,
      isActive: rawUser.status === 'active',
      fullName: `${rawUser.firstName} ${rawUser.lastName}`
    })
  }
);

这样data会自动拥有ExtendedUser的所有属性类型提示，不会出现类型不匹配的报错。

3. 避坑要点 #

• 别搞混泛型参数顺序：第一个是useQuery最终返回的数据类型，第三个是查询函数的原始返回类型
• 确保扩展类型完全继承原始类型的所有属性，避免结构不匹配
• select函数里的返回值要严格对应扩展类型的结构，不能漏加属性或者类型错误

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