阿波羅GraphQL突變的重新合成

我最近遇到了這個「簡化您的反應的組分與阿波羅和重新構圖」 @stubailo https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51 阿波羅GraphQL突變的重新合成

它表明你如何能做到GraphQL查詢與重新合成。我想知道是否有人可以提供一個用重構來做GraphQL變種的例子。就像提交表單或類似的東西一樣。

非常感謝。

來源

2017-02-22 Younis Shah

我可以問你如何做到這一點？ –

使用突變編寫使用與查詢幾乎相同。簡單的（未經測試的）例如下面的表格。表單組件有一個文本框並接收一個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)道具。

來源

2017-02-22 21:49:58 pleunv

感謝您的回答。但是我沒有問及如何將GraphQL突變與Apollo的「撰寫」結合在一起。我想用'recompose.js'做一個變異（一個表單提交）。我希望我的'Form'是一個純組件，用'withState'處理狀態，用'withHandlers'處理狀態處理器，並使用重構的'compose'組合。 –

然後，這不是一個apollo客戶端問題。我認爲這裏的例子應該是非常清楚的：https：//github.com/acdlite/recompose – pleunv

@pleuv我結束了使用你的解決方案的時間，直到我找出重組。非常感謝！ :) –

阿波羅GraphQL突變的重新合成

回答

相關問題