title: Relay local state management. How to add and use flag on client side?
body: <h3>The problem:</h3>
  <p><strong>I want to have simple boolean flag that will be <code>true</code> when modal is opened and <code>false</code> when it is closed. And I want to update other components reactively depends on that flag</strong></p>
  <p>I hope there is a way to do it with relay only (<a href="https://www.apollographql.com/docs/react/essentials/local-state/" rel="nofollow noreferrer">Apollo has a solution for that</a>). I don't want to connect redux of mobx or something like that (It is just simple boolean flag!).</p>
  <h3>What I already have:</h3>
  <p>It is possible to use <code>commitLocalUpdate</code> in order to modify your state.
  Indeed I was able to create and modify my new flag like that:</p>
  <pre class="lang-js prettyprint-override"><code>class ModalComponent extends PureComponent {
      componentDidMount() {
          // Here I either create or update value if it exists
          commitLocalUpdate(environment, (store) =&gt; {  
              if (!store.get('isModalOpened')) {
                  store.create('isModalOpened', 'Boolean').setValue(true);
              } else {
                  store.get('isModalOpened').setValue(true);
              }
          });
      }
  
      componentWillUnmount() {
          // Here I mark flag as false
          commitLocalUpdate(environment, (store) =&gt; {
              store.get('isModalOpened').setValue(false);
          });
      }
  
      render() {
          // This is just react component so you have full picture
          return ReactDOM.createPortal(
              &lt;div
                  className={ styles.modalContainer }
              &gt;
                  dummy modal
              &lt;/div&gt;,
              document.getElementById('modal'),
          );
      }
  }
  </code></pre>
  <h3>The challenge:</h3>
  <p><strong>How to update other components reactively depends on that flag?</strong>
  I can't fetch my flag like this:</p>
  <pre class="lang-js prettyprint-override"><code>
  const MyComponent = (props) =&gt; {
      return (
      &lt;QueryRenderer
          environment={ environment }
          query={ graphql`
              query MyComponentQuery {
                  isModalOpened
              }`
          } //PROBLEM IS HERE GraphQLParser: Unknown field `isModalOpened` on type `Query`
          render={ ({ error, props: data, retry }) =&gt; {
  
              return (
                  &lt;div&gt;
                      {data.isModalOpened}
                  &lt;div/&gt;
              );
          } }
      /&gt;);
  };
  </code></pre>
  <p>Because Relay compiler throws me an error: <code>GraphQLParser: Unknown field 'isModalOpened' on type 'Query'.</code></p>
  <p>And the last problem:
  <strong>How to avoid server request?</strong>
  That information is stored on client side so there is no need for request.</p>
  <p>I know there a few maybe similar questions like <a href="https://stackoverflow.com/questions/40597968/how-to-update-relay-store-without-pushing-to-server">that</a> and <a href="https://stackoverflow.com/questions/35723878/how-to-use-relay-in-combination-with-complex-local-state-in-client-side-store">that</a>. But they doesn't ask most difficult part of <strong>reactive update</strong> and answers are outdated.</p>