用RelayRouter导航relay.js应用程序抛出无效状态更改错误

Question

我在写一个relay.js应用程序，并且我正在使用react-relay-router进行路由。路由工作，但我相信这暴露了我对如何在不同视图中组织查询片段的误解。在定义

路由app.js在DataModelList.js

const rootComponent = 
    (<RelayRouter history={hashHistory}> 
    <Route path="/" 
     component={App} 
     queries={ViewerQueries} 
     onReadyStateChange={this.handleStateChange} 
    > 
     <IndexRoute 
     component={Dashboard} 
     queries={ViewerQueries} 
     /> 
     <Route 
     path="/org_setup" 
     component={OrgSetup} 
     queries={ViewerQueries} 
     /> 
     <Route 
     path="/admin/data_models" 
     component={DataModelList} 
     queries={ViewerQueries} 
     /> 
    </Route> 
    </RelayRouter>); 
ReactDOM.render(rootComponent, mountNode); 

查询片段声明

export default Relay.createContainer(DataModelList, { 
    fragments: { 
    viewer:() => 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, 
        } 
        } 
       } 
       } 
      } 
      } 
     }, 
     } 
    `, 
    }, 
}); 

在OrgSetup.js

export default Relay.createContainer(OrgSetup, { 
    fragments: { 
    viewer:() => 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, 
         } 
         } 
        } 
        } 
       } 
       }, 
      } 
      } 
     }, 
     } 
    `, 
    }, 
}); 

查询片段

当DataModelList和OrgSetup间导航（在任一方向）我看到以下错误在控制台：

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 

我能够防止此错误由两个视图中相同使得查询片段发生 - 具体是通过添加adapter片段。

但是，这感觉不对。他们不需要是完全相同的（事实上，由于这是一个学习应用程序，因此目前有些人故意臃肿），其他视图当然不会共享这些数据需求。

1. 保持查询声明简洁的最佳做法是什么？ 理想情况下，我会顶级视图只声明顶级数据 要求。具体而言，在我的例子视图文件，我会要求 只有viewer及其dataModels，然后让孩子 组件来表达自己的需求，要求任何嵌套的数据（例如 categories，tags，或adapters及其各自categories）。
2. invalid state change错误的真正含义是什么？我可以看到 它满足的查询完全匹配，但我不能 想象无关的意见是共享查询声明所必需的。我怀疑这是我在其他地方做错事的副产品。

谢谢！

Answer 1

当查询发生变化时（例如，由于路由转换或致电setVariables()）中继将区分您来自的查询和您前往的查询，计算最小查询以便从中获得帮助A到B.在你的情况下，Relay从存储在客户端上的一系列已知记录（已经获取的记录）开始，并尝试仅提取那些确切记录上的新字段，以努力构建完整的世界图片。这些refetches依靠所谓的node interface。

中继兼容的GraphQL服务器必须公开一个名为node的根域，该域可以获取给定全局ID的任何记录。该字段必须采用类型为GraphQLID!的id参数。

有关如何构建此类根字段的示例，请参见this graphql-js example。