带有重组的 Apollo GraphQL 突变

Question

我最近遇到了这个“使用 Apollo 和 Recompose 简化 React 组件”@stubailo https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51

它展示了如何使用 recompose 进行 GraphQL 查询。我想知道是否有人可以提供一个使用 recompose 进行 GraphQL 突变的示例。就像提交表格或类似的东西。

非常感谢。

Answer 1

Compose 对突变的使用与查询几乎相同。带有以下表格的简单（未经测试）示例。表单组件有一个文本框并接收一个 submitForm 属性。此属性通过 apollo HoC 包装器映射到 UpdateThing 突变，并传递必要的参数。

Form.jsx

export default class Form extends React.Component {
  state = {
    name: this.props.name
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.submitForm(this.props.id, this.state.name);
  };

  handleChangeName = (e) => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" id="name" name="name" onChange={this.handleChangeName} value={this.state.name} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

FormContainer.jsx

const withQuery = ... // Assume query code here

const withUpdateThing = graphql(gql`
  mutation UpdateThing($id: ID!, $name: String!) {
    updateThing(id: $id, name: $name) {
      id
      name
    }
  }
`, {
  props: ({ mutate }) => ({
    submitForm: (id, name) => mutate({ variables: { id, name } })
  })
});

export default compose(withQuery, withUpdateThing)(Form);

然后只需执行<FormContainer id={1} /> 即可使用。 withQuery 注入 name 属性，withUpdateThing 注入 submitForm(id, name) 属性。