如何在 TypeScript 中使用 Apollo Client 自定义钩子?
Posted
技术标签:
【中文标题】如何在 TypeScript 中使用 Apollo Client 自定义钩子?【英文标题】:How to use Apollo Client custom hooks with TypeScript? 【发布时间】: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 并且它有效。我只是经常看到人们返回解构的字段,尽管必须有一种方法。
【参考方案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 类型,但我不太确定如何使用泛型。最后我想你说得有道理,我真的不需要解构,这可以简化事情,但我会记住这一点,以防我需要更多定制的钩子 =)以上是关于如何在 TypeScript 中使用 Apollo Client 自定义钩子?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Apollo 工具为查询生成 Typescript 类型,包括 Apollo @client 和 @rest 指令?
如何使用 apollo 客户端从 schema.graphql 中提取 typescript 接口:codegen
如何在 Firestore Cloud Functions 上使用 Apollo Server GraphQL 在 TypeScript 中处理身份验证