如何使用Apollo客户端自定义挂钩与TypeScript

Question

我正试图在TypeScript项目中创建一个自定义的Apollo客户端突变钩子，形状如下：

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错误，比如CCD_ 1。

你知道我做错了什么吗？我需要添加一些特定的打字员吗？我没有正确地破坏/调用钩子吗？

Answer 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 }
];
};