Firing React Apollo mutation on page load

I am trying to implement email verification system in react-apollo application and running into an issue. The problem is that I want to fire a GraphQL mutation on page load when a user visits a link with a verification token. The mutation currently is fired on a button click, but I want it to happen on page load.

I tried to return the mutation from render but it sent the application into an infinite loop.

return (
            <Mutation
              mutation={VERIFY_EMAIL_MUTATION}
              variables={{ id }}
              onCompleted={() => this.setState({ userVerified: true })}
            >
              {(verifyEmail, { loading, error }) => {
                 verifyEmail();
            }
            </Mutation>

How can I implement firing this mutation on page load?

Use compose and pass it down as a function to your component. The following method allows you to pass multiple mutations/queries, you can use them where-ever you want without and with triggers.

import React from "react";
import { compose, graphql } from "react-apollo";

import {
  VERIFY_EMAIL_MUTATION
} from "../GraphqlQueries/ServerQueries";

class YourComponent extends React.Component {
  componentWillMount() {
    this.props.verifyEmail({variables: {email: "your_email", variable2: "variable2" }});
  }

  render() {
    return (
      <React.Fragment>
        Your Render
      </React.Fragment>
    );
  }
}

export default compose(
  graphql(VERIFY_EMAIL_MUTATION, {
    name: "verifyEmail"
  })
)(YourComponent);