Apollo-client: Question: Can i access mutation instance inside class functions with <Mutation /> tag?

[frontendmonster]

Hi, I want to use Mutation with render props and need to access mutate function inside the class function

class C extends Component {
   login = (data) => {
      // need to access mutate function here!
   }

   render () {
    <Mutation 
        mutation={MUTATION}
        update={update}
    >
    {(mutate) => this.props.children(login)}
    </Mutation>
  }
}

is it possible?

[n1ru4l]

There are multiple options:

Using a wrapper component:

import React, { Component } from "react";
import { Mutation } from "react-apollo";

class InnerComponent extends Component {
  login = (data) => {
    this.props.mutate()
  }
  render() {
    return <LoginForm />
  }
}

class WrapperComponent extends Component {
  render() {
    return <Mutation {...mutationProps}>{mutate => <InnerComponent mutate={mutate} />}
  }
}

You can also create a higher order component factory:

import React, { Component } from "react";
import { Mutation } from "react-apollo";

function withMyMutation(WrappedComponent) {
  return function MutationWrapper(props) {
    return <Mutation {...mutationProps}>{mutate => <WrappedComponent {...props} mutate={mutate} />}</Mutation>
  }
}

const C = withMyMutation(
  class extends Component {
    login = (data) => {
      this.props.mutate()
    }
  }
  render() {
    return <LoginForm />
  }
)

Last but not least there is also the graphql HoC which is AFAIK deprecated. The documentation about that Component is not available anymore.

[frontendmonster]

Thanks a lot :+1:

[mrjoseph]

you can wrap your component with withApollo
import { withApollo } from 'react-apollo';