Запросы и изменение формы с помощью Apollo Client GraphQL

Question

Вся парадигма GraphQL является новой для меня, обычно работает с React Redux.Мои требования:

1. Пользователь щелкает элемент строки с UID

2. Мы открываем форму для редактирования этих данных (с предварительно сохраненной информацией предварительно-популяция)

3. Затем мы отредактируем эти данные и сохраним

Я думаю, что (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, пока у нас нет данных, поэтому начальные значения всегда будут отражать результаты запроса.