用Apollo客户机GraphQL查询和修改表单

您的数据应该作为道具传递给实际呈现窗体的任何组件。在该组件的构造函数中,然后根据道具设置初始状态。一个粗略的例子:

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>

变异可以进入查询内部,也可以进入FormComponent本身——这一点其实并不重要。在获得数据之前,我们不会呈现FormComponent,因此初始值将始终反映查询的结果。