How to cache already loaded data and stored in Relay?

Question

I have some panel (A) showing a list of events. The panel initially loads 10 items. The user can load more items by clicking a button. The processing is handled by loadmore(). loadmore() also updates variable first' value in state and sessionStorage (I explain later why i do this). This works fine so far.

The user can click on some event and open a dialog (B) to show some event details. A and B have different routes. I am using Relay with react-router-relay. Once the user closes the dialog, the panel is shown again.

Problem: The number of events shown after returning back to the panel is equivalent to the initial value of the variable first, e.g. 10. However: I expect the number of events to be equal to the last number of events shown in the panel.

For example: Let's say initially 10 items are shown. Then the user clicks load more, then 20 items are shown. Works as expected. Then the user opens and closes the dialog, and returns back to the panel. The panel shows only 10 items but not 20 as I would expect (at least as the user) and the user has to manually load more items again.

This is my set up:

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) {
          ...
        }
      }
    `
  }
}

Goal: As I said, I want the same number of events to be shown.

Idea 1: The initial idea was to store the value of first in sessionStorage and process it in componentDidMount. Unfortunately, this doesn't work. Even with relayVariables = { first : 20 } in componentDidMount, only 10 events are shown.

Idea 2: Instead of setVariables() I could use forceFetch(), which works, but it means Relay reloads all items again once the user returns back to the panel. It doesn't make much sense because the data is already physically loaded on Relay and loading it again is kind of stupid.

Can anyone help with an idea on how to solve this?