如何在 TypeScript 中使用 Apollo Client 自定义钩子？答案

【问题标题】：How to use Apollo Client custom hooks with TypeScript?如何在 TypeScript 中使用 Apollo Client 自定义钩子？
【发布时间】：2021-07-03 14:07:01
【问题描述】：

我正在尝试在 TypeScript 项目中创建一个自定义 Apollo Client 突变挂钩，形状如下：

const customApolloMutation = () => {

  const [
    mutationFunction,
    { data, loading, error, ...result } // or just {...result}
  ] = useMutation(GRAPHQL_QUERY)


  return [mutationFunction,
    { data, loading, error, ...result } // or just {...result}
  ]
}

export default customApolloMutation ;

一切似乎都很好，但是当我将自定义挂钩导入到另一个文件中时：

  const [mutationFunction, {data, loading, error}] = customApolloMutation();

...所有解构的 props 都会给出一个 TypeScript 错误，例如 Property 'loading' does not exist on type '((options?: MutationFunctionOptions<any, OperationVariables> | undefined) => Promise<FetchResult<any, Record<string, any>, Record<string, any>>>) | { ...; }'.ts(2339)。

知道我做错了什么吗？我需要添加一些特定的类型吗？我没有正确解构/调用钩子吗？

【问题讨论】：

尝试将返回更改为return useMutation(GRAPHQL_QUERY)
就像在不解构的情况下返回整个钩子一样？我做过类似的事情 (const hook=useMutation(QUERY); return hook 并且它有效。我只是经常看到人们返回解构的字段，尽管必须有一种方法。

标签： typescript react-hooks hook apollo-client react-apollo-hooks

【解决方案1】：

我已尝试运行它，但似乎类型不确定您是否会按原样返回 MutationTuple，而是您正在创建的自定义突变挂钩假定 returnValue 为 (options?: MutationFunctionOptions<TData, TVariables>) => Promise<FetchResult<TData>> | MutationResult[]。

如果您确实需要解构，那么您可以确保已将类型添加到您的突变钩子中，以便向钩子的用户保证它以特定顺序感知数组。

const useApolloMutation = <TData, TVariables>(): MutationTuple<TData, TVariables> => {
  const [
    mutationFunction,
    { data, loading, error, ...result }
  ] = useMutation<TData, TVariables>(SOME_GQL);

  return [
    mutationFunction,
    { data, loading, error, ...result }
  ];
};

【讨论】：

谢谢！我曾尝试添加 MutationTuple 类型，但我不太确定如何使用泛型。最后我想你说得有道理，我真的不需要解构，这可以简化事情，但我会记住这一点，以防我需要更多定制的钩子 =)