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

Question

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

0

В настоящее время я пытаюсь переписать учебник 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.

Christian Ivicevic 10 дек. 2018, в 11:15

Источник

Теги:

reactjs

typescript

graphql

apollo

1 ответ

Ещё вопросы

Cory McAboy · Answer 1 · 2018-12-12T17-37-00.000Z

Функция 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>

Немного оффтоп: я бы посоветовал не использовать третий вариант из-за проблем с производительностью рендеринга, так как компонент перерисовывается при повторном создании анонимной функции. Тем не менее, я попробую первый фрагмент.