阿波罗GraphQL突变的重新合成

Question

我最近遇到了这个“简化您的反应的组分与阿波罗和重新构图” @stubailo https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51

它表明你如何能做到GraphQL查询与重新合成。我想知道是否有人可以提供一个用重构来做GraphQL变种的例子。就像提交表单或类似的东西一样。

非常感谢。

Answer 1

使用突变编写使用与查询几乎相同。简单的（未经测试的）例如下面的表格。表单组件有一个文本框并接收一个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)道具。