apollo graphql mutation component mount code example

Example 1: apollo client mutation without component

// react-apollo includes two HOCs called graphql() and withApollo() that can be used to accomplish this.
// This example takes the withApollo() HOC approach

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);

Example 2: component did mount mutation graphql

import React from 'react';
import { Mutation } from 'react-apollo';

class DoMutation extends React.Component {
  componentDidMount() {
    const { mutate } = this.props;
    mutate();
  };

  render() {
    return null;
  };
};

const MutationOnMount = ({ children, ...other }) => {
  return (
    <Mutation
      {...other}
    >
      {(mutate, { data, loading, error }) => (
        <React.Fragment>
          <DoMutation mutate={mutate} />
          { children && children(mutate, { data, loading, error }) }
        </React.Fragment>
      )}
    </Mutation>
  )
};


export default MutationOnMount;