React Query中如何声明useMutation返回类型？调用mutate遇类型错误

错误根源 #

mutate 方法是异步触发操作，但它不返回Promise或接口响应值，返回类型为void，所以你直接赋值给变量并做类型比较会触发类型不匹配错误。React Query的mutation要获取响应结果，需要用正确的异步处理方式。

解决方案1：使用mutateAsync（推荐） #

mutateAsync会返回Promise，支持用async/await直接获取响应结果，适合需要同步处理后续逻辑的场景。

步骤1：修改调用代码

// 用async函数包裹调用逻辑
const handlePublishRecruit = async () => {
  try {
    const response = await createRecruit.mutateAsync({
      clubId,
      data: { ...utcNewRecruitInfo, contents: editorRef.current?.getInstance().getHTML() ?? '' },
      date
    });
    
    // 这里可以直接判断响应结果
    if (response === 'ok') {
      // 执行你的后续操作，比如页面跳转、状态更新等
    }
  } catch (error) {
    // 可选：这里可以补充额外错误处理，useMutation中已处理snackbar提示
  }
};

// 触发发布操作
handlePublishRecruit();

步骤2：显式声明useMutation泛型（可选但推荐）

给useMutation指定泛型参数，让类型推断更准确，避免隐式类型错误：

export const useCreateRecruit = ()  => {
  const { enqueueSnackbar } = useSnackbar()
  const token = useAuthHeader()()
  const queryClient = useQueryClient()

  // 显式指定泛型：[返回值类型, 错误类型, 请求参数类型]
  return useMutation<string, AxiosError, PostRecruitParams>(
    'postRecruit',
    async (values: PostRecruitParams) => {
      const response = await postRecruitAPICall(values, token)
      return response
    }, 
    { 
      onSuccess: () => {
        queryClient.invalidateQueries('recruits')
      },
      onError: error => {
        if (error instanceof AxiosError) {
          const errorMessage = error.response?.data?.message || COMMON_MESSAGE.ADD_FAIL
          enqueueSnackbar(errorMessage, { variant: 'error' })
        } else {
          enqueueSnackbar(COMMON_MESSAGE.UNKNOWN_ERROR, { variant: 'error' })
        }
      }
    }
  )
}

解决方案2：使用mutate的回调参数 #

如果不想用async/await，可以给mutate传递第二个参数，通过局部onSuccess回调获取响应结果：

createRecruit.mutate(
  {
    clubId,
    data: { ...utcNewRecruitInfo, contents: editorRef.current?.getInstance().getHTML() ?? '' },
    date
  },
  {
    onSuccess: (response) => {
      if (response === 'ok') {
        // 执行后续操作
      }
    }
  }
);

注意：这个局部onSuccess会和useMutation中定义的全局onSuccess依次执行（先局部后全局）。

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