title: Navigating relay.js app with RelayRouter throwing Invalid State Change error
body: <p>I'm writing a relay.js app, and I'm using <a href="https://github.com/relay-tools/react-router-relay" rel="nofollow">react-relay-router</a> for routing. Routing works, but I believe it is exposing a misunderstanding on my part of how to organize query fragments across different views.</p>
  
  <p>routes defined in <strong>app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const rootComponent =
    (&lt;RelayRouter history={hashHistory}&gt;
      &lt;Route path="/"
        component={App}
        queries={ViewerQueries}
        onReadyStateChange={this.handleStateChange}
      &gt;
        &lt;IndexRoute
          component={Dashboard}
          queries={ViewerQueries}
        /&gt;
        &lt;Route
          path="/org_setup"
          component={OrgSetup}
          queries={ViewerQueries}
        /&gt;
        &lt;Route
          path="/admin/data_models"
          component={DataModelList}
          queries={ViewerQueries}
        /&gt;
      &lt;/Route&gt;
    &lt;/RelayRouter&gt;);
  ReactDOM.render(rootComponent, mountNode);
  </code></pre>
  
  <p>query fragment declaration in <strong>DataModelList.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default Relay.createContainer(DataModelList, {
    fragments: {
      viewer: () =&gt; Relay.QL`
        fragment on User {
          dataModels(first: 10) {
            edges {
              node {
                id,
                name,
                isAuthority,
                categories(first: 10) {
                  edges {
                    node {
                      id,
                      name,
                      tags(first: 10) {
                        edges {
                          node {
                            id,
                            code,
                            label,
                          }
                        }
                      }
                    }
                  }
                },
                adapter {
                  categories(first: 10) {
                    edges {
                      node {
                        id,
                        name,
                      }
                    }
                  }
                }
              }
            }
          },
        }
      `,
    },
  });
  </code></pre>
  
  <p>query fragment in <strong>OrgSetup.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default Relay.createContainer(OrgSetup, {
    fragments: {
      viewer: () =&gt; Relay.QL`
        fragment on User {
          dataModels(first: 10) {
            edges {
              node {
                id,
                name,
                isAuthority,
                categories(first: 10) {
                  edges {
                    node {
                      id,
                      name,
                      tags(first: 10) {
                        edges {
                          node {
                            id,
                            code,
                            label,
                          }
                        }
                      }
                    }
                  }
                },
              }
            }
          },
        }
      `,
    },
  });
  </code></pre>
  
  <p>When navigating between <code>DataModelList</code> and <code>OrgSetup</code> (in either direction) I see the following error in the console:</p>
  
  <pre><code>Server request for query `ViewerQueries` failed for the following reasons:
  
  1. Cannot query field "node" on "Query".
     rQueries($id_0:ID!){node(id:$id_0){id,__typename,...F0}} fra
  
  Warning: RelayReadyState: Invalid state change from 
  {"aborted":false,"done":false,"error":{"source":{"data":null,"errors":
  [{"message":"Cannot query field \"node\" on \"Query\".","locations":
  [{"line":1,"column":32}]}]}},"ready":false,"stale":false}` to `{"error":
  {"source":{"data":null,"errors":[{"message":"Cannot query field \"node\" on 
  \"Query\".","locations":[{"line":1,"column":32}]}]}}}`.warning @ 
  app.js:31567update @ app.js:39409onRejected @ app.js:39035tryCallOne @ 
  app.js:30045(anonymous function) @ app.js:30131flush @ app.js:30279
  </code></pre>
  
  <p>I'm able to prevent this error from occurring by making the query fragments in the two views identical - specifically by adding the <code>adapter</code> fragment. </p>
  
  <p>However, this feels wrong. They don't need to be identical (in fact they are somewhat intentionally bloated at the moment since this is a learning app for me), and other views will of course not share these data needs.</p>
  
  <ol>
  <li>What is the best practice for keeping query declarations concise?
  Ideally I would have top level views only declare top level data
  requirements. Concretely, in my example view files I would request
  only the <code>viewer</code> and their <code>dataModels</code>, and then allow child
  components to express their needs, requesting any nested data (eg
  <code>categories</code>, <code>tags</code>, or <code>adapters</code> and their respective <code>categories</code>).</li>
  <li>What does the <code>invalid state change</code> error really mean? I can see
  that it's satisfied by the queries matching exactly, but I can't
  imagine unrelated views are required to share query declarations. I
  suspect this is a byproduct of my doing something wrong elsewhere.</li>
  </ol>
  
  <p>Thanks!</p>