我目前正在尝试重写TypeScript中的HowToGraphQL教程,并使用相应的查询创建了一个自定义变异类,如下所示:
export const postMutation = gql`
mutation PostMutation($description: String!, $url: String!) {
post(description: $description, url: $url) {
id
createdAt
url
description
}
}
`;
export interface PostMutationData {
post: {
id: string;
createdAt: string;
url: string;
description: string;
};
}
export interface PostMutationVariables {
description: string;
url: string;
}
export class PostMutation extends Mutation<PostMutationData, PostMutationVariables> {}
消耗突变的组件基本上如下所示:
<PostMutation mutation={postMutation} variables={{ description, url }}>
{(onMutate) => <button onClick={onMutate}>Submit</button>}
</PostMutation>
不幸的是,编译器抱怨并说我无法将 onMutate
分配给 onClick
,并显示以下错误消息:
Type 'MutationFn<PostMutationData, PostMutationVariables>' is not assignable to type '(event: MouseEvent<HTMLButtonElement>) => void'.
Types of parameters 'options' and 'event' are incompatible.
Type 'MouseEvent<HTMLButtonElement>' has no properties in common with type 'MutationOptions<PostMutationData, PostMutationVariables>'.
我想知道如何正确地将 onMutate
处理程序分配给 onClick
.