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

Posted 2023-03-10

【中文标题】使用带有反应生命周期方法的 react-apollo 2.1 突变

【英文标题】：Using react-apollo 2.1 mutations with react lifecycle methods

【发布时间】：2018-10-16 20:14:38

【问题描述】：

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

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

对于高阶组件，我会在 componentDidUpdate 方法中执行此操作，但现在对于 <Mutation /> 组件，我无法执行此操作。我错过了什么吗？

【问题讨论】：

How to run a mutation on mount with React Apollo 2.1's Mutation component?的可能重复

【参考方案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>