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

IT技术 reactjs graphql apollo-client apollo-server
2021-04-30 02:31:04

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

  1. 用户单击带有 UID 的行项目

  2. 我们打开一个表单来编辑这些数据(预先填充以前保存的信息)

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

我认为(2)和(3)将被处理<Query><Mutation/><Query>的结构类型,但它不工作,主要是因为在查询设置状态会使textinputs控制的输入...所控制<Query>,我无法再修改它。

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

有什么想法吗?这应该是一个普遍的要求。其他人想出了什么?

1个回答

您的数据应该作为props传递给实际渲染表单的任何组件。在该组件的构造函数中,您然后根据props设置初始状态。一个粗略的例子:

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