Reactjs 使用Apollo客户端GraphQL查询和修改表单

整个GraphQL范式对我来说都是新的，通常使用React-Redux。我的要求是：

用户单击带有UID的行项目

我们打开一个表单来编辑此数据（预先填充了以前保存的信息）

然后我们编辑这些数据并保存

我认为（2）和（3）将由

类型的结构处理，但它不起作用，主要是因为在查询中设置状态将使textinputs控制输入。。。由

控制，我无法再编辑它

除此之外，我还了解到GraphQL不再需要Redux，等等？所以我不愿意把这个查询放在一个中间件中，然后传播给Redux

---

有什么想法吗？这必须是一个共同的要求。其他人想到了什么？

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

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扩展了React.Component{
构造函数（）{
this.state=this.props.initialState
}
渲染（）{
//使用this.state和this.props.update呈现表单
}
}
{（变异）=>(
{（{数据，加载，错误}）=>{
如果（正在加载）返回
如果（错误）返回
如果（数据）返回
}}
)}

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