reactjs - React-query 和 Typescript - 如何正确输入突变结果？

Question

我有一个简单的钩子(Hook)，可以在 React Query 中包装 axios 调用:

function useInviteTeamMember(
  onSuccess?: Handler,
  onError?: Handler,
): UseMutationResult<User> {
  const mutation = useMutation(
    (payload: InviteMutationVars) => {
      return postInviteTeamMember(payload);
    },
    {
      onSuccess: (data) => {
    ...

我遇到的问题是，根据上面的定义，您会期望结果是 User 类型。即使在那个 onSuccess 处理程序(数据)中也是根据用户类型的智能感知。但事实并非如此。要获得实际的用户对象，我必须执行 data['data']。

我认为实际的 post 函数是根本原因，因为它使用以下方式键入 Promise:

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

那么我怎样才能重写这段代码以使“数据”的类型正确呢？

Answer 1

您可以自己转换响应:

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