如何在“react-query”中声明 useMutation 返回类型答案

【问题标题】：How to declare useMutation return type in 'react-query'如何在“react-query”中声明 useMutation 返回类型
【发布时间】：2021-03-09 22:26:00
【问题描述】：

给定以下代码：

const setFriendCode = (data: Params) => api({ data })
const [mutateSetFriendCode, state] = useMutation<Response, Params>(
  setFriendCode
)

'(data: Params) => Promise' 类型的参数不可分配给'MutationFunction' 类型的参数。参数“数据”和“变量”的类型不兼容。类型 'undefined' 不可分配给类型 'Params'.ts(2345)

为了避免我使用的编译错误。

const setFriendCode = (data?: Params) => api({ data })
const [mutateSetFriendCode, state] = useMutation<Response, Params>(
  setFriendCode
)

但我想根据需要提供“数据”。

如何去掉data上的问号？

【问题讨论】：

标签： reactjs typescript typescript-typings react-query

【解决方案1】：

您似乎正在尝试匹配 this overload (2 of 4)：

export declare function useMutation<
  TData = unknown, 
  TError = unknown, 
  TVariables = void, 
  TContext = unknown
>(
  mutationFn: MutationFunction<TData, TVariables>, 
  options?: UseMutationOptions<TData, TError, TVariables, TContext>
): UseMutationResult<TData, TError, TVariables, TContext>;

useMutation 钩子有 4 个泛型类型参数。我认为您打算将Params 用作TVariables，但当您将其放在useMutation<Response, Params>() 的第二个位置时，您实际上将其用作TError。这就是为什么你最终会在 MutationFunction 的类型中使用 unknown，它代表 TVariables。

函数的签名是：

export declare type MutationFunction<
  TData = unknown, 
  TVariables = unknown
> = (
  variables: TVariables
) => Promise<TData>;

您的问题中没有很多信息，所以我将这样填写空白：

type Params = {
    something: string;
}

const api = async (args: {data: Params}): Promise<Response> => {
  return fetch('');
}

const setFriendCode = (data: Params) => api({ data })

这里基本上有两种可能的方法：

您可以在useMutation 钩子上设置泛型并为TError 添加一些值

const object = useMutation<Response, unknown, Params>(
  setFriendCode
)

您可以推断类型并确保您的参数具有强类型。使用我输入的api 和setFriendCode 类型，我得到<Response, unknown, Params, unknown>。

const object = useMutation(
  setFriendCode
)

【讨论】：

【解决方案2】：

useMutation 不返回一个数组，而是返回一个包含多个要消费的值的对象，检查以下代码：

const {
       data,
       error,
       isError,
       isIdle,
       isLoading,
       isPaused,
       isSuccess,
       mutate,
       mutateAsync,
       reset,
       status,
     } = useMutation(mutationFn, {
       mutationKey,
       onError,
       onMutate,
       onSettled,
       onSuccess,
       useErrorBoundary,
     })

【讨论】：