使用Apollo Client GraphQL查询和变异表单 [英] Querying and Mutating a Form with Apollo Client GraphQL

问题描述

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

The whole GraphQL paradigm is new to me, usually working with React Redux. My requirements are:

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

1. User clicks a Row Item w/ UID

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

We open a form to edit this data (with previously saved information pre-populated)

我们然后编辑此数据并保存

We then edit this data and save

我认为(2)& (3)将由<Query><Mutation/><Query>类型的结构处理，但是它不起作用，主要是因为在Query中设置状态将使textinputs控制输入...由<Query>控制，并且我无法再对其进行编辑

I would think (2) & (3) would be handled by a <Query><Mutation/><Query> type of structure but it doesn't work, mainly because setting state in the Query will make the textinputs controlled inputs... controlled by <Query>, and I can no longer edit it.

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

Besides this, I've read that GraphQL removes the need for Redux, etc? So I'm reluctant to go around sticking this query in a middleware and propogating to Redux.

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

Any thoughts? This must be a common requirement. What have others came up with?

推荐答案

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

Your data should be passed down as a prop to whatever component will actually render the form. Inside that component's constructor, you then set the initial state based on the props. A rough example:

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

The mutation could go inside the Query, or inside the FormComponent itself -- that bit doesn't really matter. We're not rendering the FormComponent until we have data, so the initial values will always reflect the results of the query.

这篇关于使用Apollo Client GraphQL查询和变异表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！