使用react-apollo 2.1突变和react生命周期方法

Question

我想知道，在react生命周期方法中使用新的Mutation组件的方法是什么。

假设我有一个页面，其中我使用了几个react-apollo突变。当加载从true到false的状态更改时，我想执行另一个突变，以便在页角显示一个通知弹出窗口。

对于高阶组件，我会在componentDidUpdate方法中做到这一点，但现在使用<Mutation />组件，我不能做到这一点。我错过了什么吗？

Answer 1

你可以在render prop函数中渲染你的组件，并在props中传递突变：

import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_TODO = gql`
  mutation addTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

const AddTodo = () => {
  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => 
        <YourComponent someFunction={addTodo} /> 
      }
    </Mutation>
  );
};

class YourComponent extends Component {
  componentDidMount(){
    this.props.someFunction({variables: {type: 'abc'}})
  }
  render(){
    return <div></div>
  }
}