将 mutate() 从 ApolloClient 移动到 React 组件的正确方法？

Posted 2023-03-10

【中文标题】将 mutate() 从 ApolloClient 移动到 React 组件的正确方法？

【英文标题】：Correct Way to Move Mutate() from ApolloClient to React Component?

【发布时间】：2017-11-28 03:32:38

【问题描述】：

根据Apollo Docs，我想从 ApolloClient 获取 mutate() 函数到属于我的反应组件的道具中。这是正确/首选的方法吗？

class myComponent extends React.Component 
    constructor(props) 
        super(props);
        this.mutate = props.client.mutate();
    ;

【参考方案1】：

如果您想使用 apollo 客户端动态调用突变，则可以像这样使用它：

import  withApollo  from 'react-apollo';

class myComponent extends React.Component 
  constructor(props) 
    super(props);
    this.mutate = props.client.mutate;
  

  onClick = () => 
    this.mutate(
      mutation: gql `$<define your graphql mutation>`,
      variables:  ... ,
    ).then(...);
  
  
  ...


export default withApollo(MyComponent);

否则，我建议您使用 graphql 静态定义您的突变，然后调用突变：

class MyComponent extends React.Component 
  onClick = () => 
    this.props.mutate( variables:  ...  ).then(....);
  

  ...



const yourGraphqlMutation = gql `$<define your graphql mutation>`;

export default graphql(yourGraphqlMutation)(MyComponent);