我目前正在尝试重写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 .