Аполлон Форма Государственное управление

Question

Какой самый обычный способ управления состоянием форм с помощью клиента React Apollo?Существует слишком много пошаговых руководств по основным запросам apollo и простым приложениям todo, но ни одного из них я не видел, как работать с реалистичными формами.

Представление трех разных пользовательских потоков:

1. Редактирование существующего объекта (форма обновления)
2. Редактирование коллекции путем добавления / удаления элемента (форма обновления)
3. Создание новой сущности (создание формы)

Кажется, есть несколько решений:

1. Используйте компонент React с сохранением состояния.Эта форма с состоянием вложена в <Query /> и <Mutation /> или иным образом имеет доступ к data и mutate.При отправке используйте функцию mutate непосредственно для отправки мутации и (при необходимости) обновите кэш вручную при успешном завершении.Это работает, но требует более сложного компонента с состоянием.Один из побочных эффектов заключается в том, что вы должны вычислять состояние из реквизита (componentWillReceiveProps и т. Д.), Поскольку для формы требуется как query (для формы обновления, чтобы показать текущие значения), так и mutation, и вы можете получитьновые данные после того, как форма уже обработана (при повторном поиске / опросе)

2. Использовать Apollo-Link-State и @client - объем запросов.Похоже, что это сталкивается с теми же проблемами, что и компонент с состоянием, если не больше из-за дополнительной косвенности.Он интуитивно понятен для формы создания / новой сущности, поскольку эта новая сущность может быть сохранена в локальном кеше, а затем отправлена ​​удаленному API при отправке и автоматически появится в нормальном кеше при успешном выполнении.Тем не менее, это менее интуитивно понятно для формы обновления, так как теперь у вас есть две копии одного и того же объекта, по сути.Форма также должна будет переключить свой источник истины, чтобы первоначально считывать из обычного кэша для заполнения формы, затем записывать / читать из локального кэша во время редактирования, а затем, возможно, возвращаться в обычный кэш после отправки.В противном случае хорошие объяснения, такие как https://www.robinwieruch.de/react-apollo-link-state-tutorial/, не показывают, как отправлять эти локально кэшированные данные, и в основном фокусируются на данных, которые предназначены только для локального хранения, таких как результаты API устройства и конфигурация пользователя.

3. Записать в авторитетный / 'нормальный' кеш apollo, прямо поверх api-извлеченных данных, затем прочитать их обратно из кеша, чтобы передать их в удаленный API.Похоже, это имеет больше смысла для формы обновления, поскольку для этой сущности есть только одно состояние, но она не будет работать для новой сущности, поскольку у этой сущности еще не будет идентификатора (хотя мы могли бы сгенерировать uuid на клиенте,Я бы предпочел, чтобы бэкэнд генерировал идентификатор), и поэтому AFAIK не может работать с кешем Apollo.Другая проблема заключается в том, что данные формы, которые только что отправил пользователь, будут перезаписаны при получении, что может расстраивать, если что-то не работает.

Примите во внимание любые советы, примеры или вводные данные- заранее спасибо!

Answer 1

Я считаю apollo-link-state более полезным для ситуаций, когда вы хотите управлять состоянием, полностью на стороне клиента, а не частью данных, которые вы извлекаете с вашего сервера.Я не думаю, что он хорошо подходит для управления состоянием компонентов, особенно форм.Что прекрасно работает, так это объединение Apollo с библиотекой вроде Formik .Это уменьшает шаблон и общую сложность и вашего компонента.Вот грубый пример:

<Query query={SOME_QUERY} />
{({ loading, data }) => {
  if (loading) return <LoadingIndicator/>
  return (
    <Mutation query={SOME_MUTATION}>
      {(mutate) => (
        <Formik
          initialValues={_.pick(data.someData, ['foo', 'bar'])}
          validate={/** optional validation function or schema **/}
          onSubmit={values => mutate({ variables: values })}
        >
          {(formikProps) => (
            <YourFormComponent {...formikProps}/>
          )}
        </Formik>
      )}
    </Mutation>
  )
}}
</Query>

Функция рендеринга компонента Formik получает тонну реквизитов, которые все описаны здесь .Фактический компонент формы может не иметь состояния и в основном просто отображать, какие реквизиты передаются ему (значения, ошибки, обработчики onChange и т. Д.).Formik принимает yup схемы для проверки, что также упрощает проверку входных данных.