React Query 结合 TypeScript 如何正确为 mutation 结果定义类型

问题根源 #

你当前的类型定义和实际运行返回值不匹配：axios.post方法默认返回的是封装后的AxiosResponse类型对象，接口返回的真实User数据存储在该对象的data属性下，你直接将client.post的返回值声明为Promise<User>属于类型谎报，才会导致静态类型提示和运行时结果不一致。

解决方案 #

方案一（更推荐）：请求方法直接返回业务数据

在请求方法中提前取出响应体里的业务数据，让返回值和声明的类型完全匹配：

import type { AxiosResponse } from 'axios';

export function postInviteTeamMember(payload: InviteMutationVars): Promise<User> {
  // 拿到axios响应后直接返回内部的data字段
  return client.post('/user/invite/team', payload)
    .then((response: AxiosResponse<User>) => response.data);
}

修改后你的自定义hook不需要做任何改动，onSuccess回调的data参数静态类型和运行时的值都会是User类型。

方案二：保留完整axios响应对象

如果你需要在业务层用到完整的响应状态、头部等信息，可以调整类型定义匹配实际返回值：

1. 先修正请求方法的返回类型定义：

import type { AxiosResponse } from 'axios';

export function postInviteTeamMember(payload: InviteMutationVars): Promise<AxiosResponse<User>> {
  return client.post('/user/invite/team', payload);
}

2. 再调整自定义hook的泛型参数：

function useInviteTeamMember(
  onSuccess?: Handler,
  onError?: Handler,
): UseMutationResult<AxiosResponse<User>> {
  const mutation = useMutation(
    (payload: InviteMutationVars) => postInviteTeamMember(payload),
    {
      onSuccess: (response) => {
        // 此时response.data 就是User类型，和运行时一致
        const user = response.data;
        // 后续业务逻辑
      }
    }
  )
  // ...
}

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