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

Question

给出以下代码：

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

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

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

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

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

如何去掉上面的问号data？

Answer 1

看来您正在尝试匹配此重载（4 中的 2）：

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 个泛型类型参数。我认为您打算使用ParamsasTVariables但实际上TError当您将它放在 的第二个位置时使用它useMutation<Response, Params>()。这就是为什么你最终会在代表 的unknown类型中得到一个。MutationFunctionTVariables

该函数的签名是：

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 })

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

1. 您可以在钩子上设置泛型useMutation并包含一些值TError

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

2. 您可以推断类型并确保您的参数具有强类型。api通过我穿上的类型setFriendCode，我得到了<Response, unknown, Params, unknown>。

const object = useMutation(
  setFriendCode
)

Answer 2

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

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