Как кешировать уже загруженные данные и хранящиеся в Relay?

Question

У меня есть какая-то панель (A), показывающая список событий. Панель изначально загружает 10 элементов. Пользователь может загрузить больше элементов, нажав кнопку. Обработка обрабатывается loadmore(), loadmore() также обновляет переменную first'значение в состоянии и sessionStorage (я объясню позже, почему я делаю это). Это работает отлично до сих пор.

Пользователь может нажать на какое-то событие и открыть диалоговое окно (B), чтобы показать некоторые детали события. А и Б имеют разные маршруты. Я использую Реле с реакции-маршрутизатор-реле. Когда пользователь закрывает диалоговое окно, панель отображается снова.

Проблема: число событий, отображаемых после возврата на панель, эквивалентно начальному значению переменной firstНапример, 10. Однако я ожидаю, что количество событий будет равно последнему числу событий, отображаемых на панели.

Например: Допустим, изначально показано 10 элементов. Затем пользователь нажимает кнопку "Загрузить больше", затем отображается 20 элементов. Работает как положено. Затем пользователь открывает и закрывает диалоговое окно и возвращается на панель. Панель показывает только 10 элементов, но не 20, как я ожидал (по крайней мере, как пользователь), и пользователь должен снова вручную загрузить больше элементов.

Это моя установка:

class Panel extends React.Component {

 componentDidMount () {
   const first = // return stored value for first, e.g. from sessionStorage
   let stateUpdate = { first : first }
   let relayVariables = { first : first }

   this.setState(stateUpdate, () => {
     this.props.relay.setVariables(relayVariables)
   })
 }   

 loadmore = () => {
   this.setState({
     first: this.props.relay.variables.first + 10
   }, () => {
     this.props.relay.setVariables({
       first: this.state.first
     }, () => {
       ... update value for first, e.g. in sessionStorage
     })
   })
 }
}

export const PanelContainer = Relay.createContainer(Panel, {
  initialVariables: initialVariables,
  fragments: {
    mandant: () => Relay.QL`
      fragment on SomeType {
        id
        events (first: $first) {
          ...
        }
      }
    `
  }
}

Цель: Как я уже сказал, я хочу, чтобы показывалось одинаковое количество событий.

Идея 1: Первоначальной идеей было сохранить значение first в sessionStorage и обработать его в componentDidMount, К сожалению, это не работает. Даже с relayVariables = { first : 20 } в componentDidMountотображаются только 10 событий.

Идея 2: вместо setVariables() Я мог бы использовать forceFetch(), который работает, но это означает, что Relay перезагрузит все элементы снова, как только пользователь вернется на панель. Это не имеет особого смысла, потому что данные уже физически загружены в Relay, и их повторная загрузка выглядит глупо.

Может кто-нибудь помочь с идеей о том, как решить эту проблему?