Question

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

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

对于更高阶的组件，我会在componentDidUpdate方法中执行此操作，但现在使用<Mutation />组件，我无法做到这一点。我错过了什么吗？

Answer 1

您可以在渲染道具函数中渲染组件并在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>
  }
}

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

1 个答案: