使用 Apollo Client GraphQL 查询和修改表单答案

【问题标题】：Querying and Mutating a Form with Apollo Client GraphQL使用 Apollo Client GraphQL 查询和修改表单
【发布时间】：2019-03-13 20:15:13
【问题描述】：

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

用户单击带有 UID 的行项目
我们打开一个表单来编辑这些数据（预先填充了之前保存的信息）
然后我们编辑这些数据并保存

我认为 (2) 和 (3) 将由 <Query><Mutation/><Query> 类型的结构处理，但它不起作用，主要是因为在查询中设置状态将使 textinputs 受控输入...由 @ 控制987654322@，我不能再编辑了。

除此之外，我听说 GraphQL 消除了对 Redux 等的需求？所以我不愿意把这个查询放在中间件中并传播到 Redux。

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

【问题讨论】：

标签： reactjs graphql apollo-client apollo-server

【解决方案1】：

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

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，因此初始值将始终反映查询的结果。

【讨论】：