Правильный ввод Apollo Mutation рендеринга для обработчика onClick - PullRequest
Новая
       5

Правильный ввод Apollo Mutation рендеринга для обработчика onClick

0 голосов
/ 10 декабря 2018

В настоящее время я пытаюсь переписать учебник HowToGraphQL на языке TypeScript и создал пользовательский класс мутаций с соответствующим запросом следующим образом: 

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 правильно.

1 Ответ

0 голосов
/ 12 декабря 2018

Функция onMutate ожидает параметр объекта с именем 'options' в качестве первого аргумента.Вы пытаетесь присвоить это onClick, который имеет тип события в качестве первого параметра, что делает типы несовместимыми.

Есть несколько способов исправить это.Вы можете создать функцию, которая вызывает onMutate с параметром option, прежде чем объявить кнопку и просто передать указанную функцию onClick. 

<PostMutation mutation={postMutation}>
    {(onMutate) => {
        const onMutateFunc = () => onMutate({ variables: { description, url } })
        return (
            <button onClick={onMutateFunc}>Submit</button>}
        )
     }
</PostMutation>

Или вы можете создать функцию onClick, которая вызывает onMutate. 

// Class level function
onClick = () => onMutate({ variables: { description, url } })

<PostMutation mutation={postMutation}>
    {(onMutate) => {
        const onMutateFunc = onMutate({ variables: { description, url } })
        return (
            <button onClick={this.onClick}>Submit</button>}
        )
    }
</PostMutation>

Вы также можете сделать это встроенным 

<PostMutation mutation={postMutation}>
    {(onMutate) => {
        return (
            <button onClick={() => onMutate({ variables: { description, url } })}>Submit</button>}
        )
    }
</PostMutation>
...