Apollo GraphQL мутации с Перекомпонуйте

Question

Недавно я наткнулся с этим «Упростить ваши Реагировать компоненты с Аполлоном и Перекомпонуйте» @stubailo https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51

Он показывает, как вы можете сделать GraphQL запросы с Перекомпонуйте. Мне было интересно, может ли кто-нибудь предоставить пример выполнения мутации GraphQL с помощью recompose. Как подавать форму или что-то подобное.

Большое значение.

Answer 1

Составление использования с мутациями в значительной степени совпадает с запросами. Простой (непроверенный) пример с формой ниже. Компонент формы имеет одно текстовое поле и получает свойство submitForm. Это свойство сопоставляется с мутацией UpdateThing через оболочку apollo HoC и получает необходимые аргументы.

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) опора.