如何在React Query中为onSuccess的返回数据添加类型？

错误原因 #

你定义的IRegisterResponse是Axios响应中data字段的类型，但httpClient.post<IRegisterResponse>返回的是整个AxiosResponse对象，结构为{ data: IRegisterResponse, status: number, ... }。useMutation的onSuccess回调接收的参数是这个完整的AxiosResponse对象，直接解构accessToken自然会提示属性不存在。

两种解决方式 #

方式一：让register函数直接返回响应数据

修改register函数，从AxiosResponse中提取data返回，使返回类型匹配你期望的IRegisterResponse：

interface IRegisterResponse {
  accessToken: string;
}

export const register = async ({
  name,
  password,
  token,
}: IRegisterParams): Promise<IRegisterResponse> => {
  const response = await httpClient.post<IRegisterResponse>('register', {
    name,
    password,
    token,
  });
  return response.data; // 仅返回data字段
};

此时useMutation的onSuccess参数就是IRegisterResponse，解构accessToken完全正常：

const { mutate: registerMutation } = useMutation(
  ['register'],
  register,
  {
    onSuccess: ({ accessToken }) => console.log(accessToken),
  }
);

方式二：在onSuccess中正确访问AxiosResponse的data字段

如果不想修改register函数，直接在回调中通过response.data层级获取数据：

const { mutate: registerMutation } = useMutation(
  ['register'],
  register,
  {
    // 直接访问data下的accessToken
    onSuccess: (response) => console.log(response.data.accessToken),
    // 或者通过嵌套解构简化
    // onSuccess: ({ data: { accessToken } }) => console.log(accessToken),
  }
);

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