使用带有反应生命周期方法的 react-apollo 2.1 突变

Question

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

假设我有一个页面，我在其中使用了几个 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>
  }
}