How to run a mutation on mount with React Apollo 2.1's Mutation component?

Question

We are currently moving from Relay to React Apollo 2.1 and something I\'m doing seems fishy.

Context: Some components must only be rendered if the u

Answer 1

Right or wrong, Apollo makes some assumptions about how queries and mutations are used. By convention queries only fetch data while mutations, well, mutate data. Apollo takes that paradigm one step further and assumes that mutations will happen in response to some sort of action. So, like you observed, Query fetches the query on mount, while Mutation passes down a function to actually fetch the mutation.

In that sense, you've already deviated from how these components are "supposed to be used."

I don't think there's anything outright wrong with your approach -- assuming called never gets reset, your component should behave as intended. As an alternative, however, you could create a simple wrapper component to take advantage of componentDidMount:

class CallLogin extends React.Component {
  componentDidMount() {
    this.props.login()
  }

  render() {
    // React 16
    return this.props.children
    // Old School :)
    // return 
{ this.props.children }
  }
}

export default function Authenticator({ apiKey, render }) {
  return (
    
      {(login, { data, error }) => {
        const token = (data && data.login.token) || undefined;
        return (
          
            {render({ error, token })}
          
        )
      }}
    
  );
}