Как обновить хранилище реле без отправки на сервер

В моем приложении React / Relay есть форма, которую я использую для изменения некоторых полей. Я не хочу отправлять обновление сервера каждый раз, когда вводится новое письмо. Как я могу использовать Relay для поддержки состояния приложения, не всегда отправляя запрос на сервер? Прочитав большую часть документации Relay, мне кажется, что я должен в основном скопировать состояние Relay либо в локальное состояние моей формы, либо в какое-то другое хранилище Flux, изменить его там, а затем зафиксировать его в Relay. Это кажется большой дополнительной работой, хотя просто для того, чтобы сохранить местное состояние.


person Matthew Herbst    schedule 14.11.2016    source источник
comment
Вы можете либо установить состояние в компоненте, либо использовать локальное хранилище, такое как redux. Насколько мне известно, вы не можете обновлять ретрансляционное хранилище локально так, как вы описываете. Пройдя недавно через подобные сценарии, я рад, что меня поправили. Лично я думаю, что когда дело доходит до формы, полезно не только сохранять локальное состояние, но также использовать локальное хранилище для сохранения состояния, если пользователь обновляет страницу или возвращается позже, чтобы закончить, однако это может не подходить ваш вариант использования здесь.   -  person alexi2    schedule 16.11.2016


Ответы (2)


Текущая версия Relay является связующим звеном между graphQL и React, она обрабатывает данные только с сервера.


... мне кажется, что я должен в основном скопировать состояние Relay либо в локальное состояние моей формы ...

Я не вижу проблемы. Принцип работы React требует, чтобы вы хранили state для всей формы или в любом случае для каждого ввода отдельно.

Если вы добавите функцию редактирования (отрисовка формы и выборка данных для заполнения входных данных, чтобы пользователь мог их изменить), все данные Relay в любом случае будут доступны как this.props.RelayFragmentName на уровне формы.

Вы передаете его на входы, где назначаете его state, и круг завершается. Вы также можете подавать входные данные непосредственно из props (без назначения данных для входа state) и изменять форму state из входных данных с помощью методов.

Теперь, когда пользователь внесет изменения и подтвердит их, вы просто снова соберете все state, чтобы произвести мутацию.

Я вижу это как замкнутый круг, который невозможно разорвать, если установлены все значения по умолчанию.


У Relay есть императивный API для получения, добавления или обновления кеша напрямую, но он относительно грязный и редко используется (особенно для локального состояния). Он используется для таких функций, как WebSockets, где вы хотите отправлять обновления с сервера на клиент и обновлять кеш вручную.

Current Relay предназначен для работы только с данными сервера. Реле 2 имеет локальный кеш, но его еще нет.


Если мы говорим о разных вещах или вы могли бы использовать несколько примеров кода, дайте мне знать.

person Solo    schedule 20.11.2016
comment
Привет, спасибо за ответ. Я думаю, что мы говорим об одном и том же, хотя мне бы хотелось увидеть использование RelayFragmentName, я этого раньше не видел. Думаю, я просто чувствую, что хочу использовать API и изменять состояние непосредственно в Relay, передавая все как свойства и позволяя моему компоненту оставаться без состояния. Я просто не обязательно хочу, чтобы каждое изменение состояния реле приводило к сетевому запросу. - person Matthew Herbst; 22.11.2016

В релейной современной вы можете использовать commitLocalUpdate для этого.

Например

onEmailChange = (email) => {
  commitLocalUpdate(environment, (proxy) => {
    const userProxy = proxy.get(this.props.user.__id);
    userProxy.setValue(email, 'email');
  });
}
person Kareem Elbahrawy    schedule 12.01.2018
comment
Потрясающий! Я вижу функцию в репо, но есть ли по ней какие-либо документы? - person Matthew Herbst; 12.01.2018
comment
@MatthewHerbst Нет, я не смог найти его в их официальных документах, и хотя это будет работать, вы должны использовать нормальное состояние компонента, если вы не хотите, чтобы эти изменения отражались в другом компоненте при изменении ввода ... - person Kareem Elbahrawy; 13.01.2018