如何从graphql（）创建的高阶组件中获取MutationResult

Question

React Apollo Mutations允许我创建一个组件，该组件采用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);

我的组件将只有使变作为道具。如何将{data， load， error}获取到组件中？

Answer 1

@allenylju

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

Answer 2

变异是一种promise，因此您可以接收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);