您的数据应该作为props传递给实际渲染表单的任何组件。在该组件的构造函数中,您然后根据props设置初始状态。一个粗略的例子:
class FormComponent extends React.Component {
constructor () {
this.state = this.props.initialState
}
render () {
// Render form using this.state and this.props.update
}
}
<Mutation mutation={SOME_MUTATION}>
{(mutate) => (
<Query query={SOME_QUERY}/>
{({ data, loading, error }) => {
if (loading) return <LoadingIndicator/>
if (error) return <ErrorComponent/>
if (data) return <FormComponent initialValues={data.someQuery} update={mutate}/>
}}
</Query>
)}
</Mutation>
突变可以进入 Query 内部,也可以进入 FormComponent 本身——这一点并不重要。我们在有数据之前不会渲染 FormComponent,因此初始值将始终反映查询的结果。