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

Posted 2023-03-08

【中文标题】使用 Apollo Client GraphQL 查询和修改表单

【英文标题】：Querying and Mutating a Form with Apollo Client GraphQL

【发布时间】：2019-03-13 20:15:13

【问题描述】：

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

用户单击带有 UID 的行项目

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

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

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

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

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

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