Question

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

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

我认为（2）和（3）将由<Query><Mutation/><Query>类型的结构处理，但是它不起作用，主要是因为在Query中设置状态将使textinputs受控制... <Query>之前，我将无法再对其进行编辑。

除此之外，我已经读到GraphQL消除了对Redux等的需求？因此，我不愿意将查询保留在中间件中并传播到Redux。

有什么想法吗？这必须是一个普遍的要求。其他人想出了什么？

Answer 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>

该突变可以在查询内部，也可以在FormComponent本身内部-一点都不重要。在没有数据之前，我们不会渲染FormComponent，因此初始值将始终反映查询的结果。

使用Apollo Client GraphQL查询和变异表单

1 个答案: