2

我正在尝试在以下形状的 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();

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

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

4

1 回答 1

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 }
  ];
};
于 2021-04-08T04:32:05.393 回答