Мутации Apollo без компонента React <Mutation>

Обновление для React Hooks (18.12.2020):

Если вы используете Apollo v3+ и функциональные компоненты React, теперь есть более чистое решение с использованием хука useMutation(), предоставленного Apollo:

import React from "react";
import { useMutation } from "@apollo/client";
import SomeLibrary from "SomeLibrary";

import { DO_MUTATION } from "./mutations";

export default function MyComponent() {
    const [doMutation, { data }] = useMutation(DO_MUTATION);

    let listenerHandler = () => {
        doMutation({
            variables: {
                some_var: "some_val",
            },
        });
    };

    return (
        <button
            onPress = {() => {
                SomeLibrary.addListener(listenerHandler);
            }}
        />
    );
}

Кроме того, официальные документы говорят:

The useMutation React hook is the primary API for executing mutations in an Apollo application.

Использование хуков теперь предпочтительнее, чем HOC в Apollo, поэтому, вероятно, лучше использовать useMutation(), если можете.

Вы можете прочитать документацию по useMutation по адресу: https://www.apollographql.com/docs/react/data/mutations/

Оригинальный ответ:

react-apollo включает два HOC, называемых graphql() и withApollo(), которые можно использовать для достижения этой цели.

Разница между ними описана в документации Apollo как:

If you are wondering when to use withApollo() and when to use graphql() the answer is that most of the time you will want to use graphql(). graphql() provides many of the advanced features you need to work with your GraphQL data. You should only use withApollo() if you want the GraphQL client without any of the other features.

Когда graphql() предоставляется мутация, она добавит функцию this.props.mutate() и может использоваться следующим образом:

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { graphql } from "react-apollo";

import SomeLibrary from "SomeLibrary";

export class MyComponent extends Component {
    render() {
        return (
            <Button
                onPress = {() => {
                    SomeLibrary.addListener(this.listenerHandler);
                }}
            />
        );
    }

    listenerHandler = () => {
        this.props.mutate({
            variables: {
                some_var: "some_val",
            },
        });
    };
}
export default graphql(DO_MUTATION)(MyComponent);

withApollo() похож, но вместо этого предоставляет this.props.client для непосредственного использования. Мутация может быть выполнена следующим образом:

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { withApollo } from "react-apollo";

import SomeLibrary from "SomeLibrary";

export class MyComponent extends Component {
    render() {
        return (
            <Button
                onPress = {() => {
                    SomeLibrary.addListener(this.listenerHandler);
                }}
            />
        );
    }

    listenerHandler = () => {
        this.props.client.mutate({
            mutation: DO_MUTATION,
            variables: {
                some_var: "some_val",
            },
        });
    };
}
export default withApollo(MyComponent);