问题描述
我正在尝试在 TypeScript 项目中创建一个自定义的 Apollo Client 突变挂钩,其形状如下:
const customApolloMutation = () => {
const [
mutationFunction,{ data,loading,error,...result } // or just {...result}
] = useMutation(GRAPHQL_QUERY)
return [mutationFunction,...result } // or just {...result}
]
}
export default customApolloMutation ;
一切看起来都很好,但是当我像这样在不同的文件中导入自定义钩子时:
const [mutationFunction,{data,error}] = customApolloMutation();
...所有解构的 props 都会出现 TypeScript 错误,例如 Property 'loading' does not exist on type '((options?: MutationFunctionoptions<any,OperationVariables> | undefined) => Promise<FetchResult<any,Record<string,any>,any>>>) | { ...; }'.ts(2339)
。
知道我做错了什么吗?我需要添加一些特定的类型吗?我没有正确地解构/调用钩子吗?
解决方法
我试过运行它,但似乎类型不确定您是否会按原样返回 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,...result }
];
};