如何从 graphql() 创建的高阶组件中获取 MutationResult答案

【问题标题】：How do I get MutationResult from higher order component created by graphql()如何从 graphql() 创建的高阶组件中获取 MutationResult
【发布时间】：2019-01-26 01:59:55
【问题描述】：

React Apollo Mutations 允许我创建一个组件，该组件接收带有 { data, loading, error } 作为道具的 MutationResult：https://www.apollographql.com/docs/react/api/react-apollo.html#mutation-render-prop

现在，如果我要使用 graphql() 创建的高阶组件

function MyComponent({ mutate }) {
  return (
    <button onClick={() => {
      mutate({
        variables: { foo: 42 },
      });
    }}>
      Mutate
    </button>
  );
}

export default graphql(gql`mutation { ... }`)(MyComponent);

我的组件将只有 mutate 作为道具。如何将{ data, loading, error } 放入组件中？

【问题讨论】：

您实际上可以在文档中阅读它。它说mutate 返回一个 Promise。因此，您可以使用.then 从突变中获取结果，或者使用.catch 以防出现错误。在加载的情况下，您可以使用组件状态来执行此操作，在 mutate 之前调用 setState({ loading: true}) 并在其之后调用 setState({ loading: false}) 。希望对您有所帮助！
@qmateub 这是很好的信息。你应该把它写成答案。验证后，我会将您的答案标记为答案。

标签： reactjs graphql apollo react-apollo apollo-client

【解决方案1】：

Mutation 是一个承诺，因此您可以在 then 中接收值，并根据需要返回它们。如果你有 async 和 await ，你可以返回数据并使用 await ，这样你就可以以同步的代码风格访问它。

function MyComponent({ mutate, setState }) {
  return (
    <button onClick={() => 
      mutate({
        variables: { foo: 42 },
      }).then(data => {
        // Process your data as needed here:
        setState({ data });
      }).catch(err => console.error('Our Error: ', err);
    }>
      Mutate
    </button>
  );
}

export default graphql(gql`mutation { ... }`)(MyComponent);

【讨论】：

【解决方案2】：

@allenylzhou

您实际上可以在文档中阅读它。它说 mutate 返回一个 Promise。因此，您可以使用.then 从突变中获取结果，或者使用.catch 以防出现错误。在加载的情况下，您可以使用组件状态来执行此操作，在 mutate 之前调用 setState({ loading: true}) 并在其之后调用 setState({ loading: false}) 。希望能帮助到你！

【讨论】：