用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。