使用相同中继根查询和不同片段字段的多个react-router-relay路由

Question

我遇到一个问题，当使用相同的根查询在两个相邻的react-router-relay路由组件中请求数据时，第二个路由组件中的graphql服务器查询会使先前从第一个路由中检索到的数据无效。

举个例子：

我正在使用一种解决方法，将字段附加到“查看者”根节点，以便从根字段中查询数据数组：

我的schema.js包含以下用于查看器（用户）类型和根的定义：

var GraphQLUser = new GraphQLObjectType({
   name: 'User',
   isTypeOf: function(obj) { return obj instanceof User },
   fields: function() {
      return {
         id: GraphQLRelay.globalIdField('User'),
         //Fields to expose to app, e.g. cars
         cars: {
            type: GraphQLRelay.connectionDefinitions({
               name: 'Car', nodeType: carType
            }).connectionType,
            args: GraphQLRelay.connectionArgs,
            resolve: function(user, args) {
               return
                 GraphQLRelay.connectionFromPromisedArray(getCars(), args)
            },
        },
     }
 },
 interfaces: [nodeDefinitions.nodeInterface],
});

和根：

var Root = new GraphQLObjectType({
   name: 'Root',
   fields: {
      viewer: {
         type: GraphQLUser,
         resolve: (root, {} ) => getUser()
    },
    node: nodeDefinitions.nodeField
});

现在，在main.jsx应用程序入口点中，我定义了以下路由：

ReactDOM.render(
   <Router createElement={ReactRouterRelay.createElement}>
      <Route path="/" component={App} queries={ViewerQueries} />
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
  </Router>,
  document.getElementById('ReactContainer'));

与ViewerQueries.js包含：

export default {
   viewer: () => Relay.QL`query { viewer }`,
};

现在，如果App组件包含以下graphql片段：

exports.Component = Relay.createContainer(App, {
   initialVariables: {
      limit: 10
   },
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
         cars (first: $limit) {
            edges {
              node {
                 name,
              }
            }
          }
       }`,
   },
 })

而且， AllCars组件包括以下内容：

exports.Component = Relay.createContainer(AllCars, {
   initialVariables: {limit: 10},
   fragments: {
      viewer: () => Relay.QL`
         fragment on User {
            cars (first: $limit) {
               edges {
                  node {
                     name,
                     type
                  }
               }
            }
        }`,
     },
  })

发生的情况是，在路径“ /”上呈现App组件时，无问题地返回了汽车阵列。 但是，一旦渲染了“ / cars”路径，“ this.props.viewer.cars”上的结果数组为空。 此外，返回路径“ /”以引起App组件的重新呈现现在也返回了一个空数组。

在后端，看来AllCars组件会导致额外的POST /graphql 200 277.369 ms - 94到服务器的行程，以获取片段中指定的新type 。 如果AllCars组件仅包含“名称”字段，则Relay不会正确发出其他服务器请求，而是使用数据填充（应该从最初的App组件服务器请求中缓存）数据。

难道不可以从任何一个组件中获取汽车阵列，而Relay可以获取片段中指定的任何其他数据字段，而不管它们在路线中出现的顺序如何？

任何帮助将不胜感激！

Answer 1

（发布为答案，因为我无法格式化注释中的代码。）

您描述的场景非常适合使用嵌套路由：

ReactDOM.render(
  <Router createElement={ReactRouterRelay.createElement}>
    <Route path="/" component={App} queries={ViewerQueries}>
      <Route path="/cars" component={AllCars} queries={ViewerQueries} />
    </Route>
  </Router>,
  document.getElementById('ReactContainer')
);

如果仍然看到具有该结构的空数组，是否可以提供一个链接，以包含通过网络发送的查询和响应的要点？

Answer 2

问题最终变成schema.js文件中（示例） Car类型的无效nodedefinitions schema.js 。 我最终使用的节点定义是：

 var nodeDefinitions = GraphQLRelay.nodeDefinitions(function(globalId) {
   var idInfo = GraphQLRelay.fromGlobalId(globalId)
     if (idInfo.type == 'Car') {
        return getCarById(idInfo.id)
     } else if ...
       // Other types here
     }
    return null
 });

返回的getCarById函数无法正确解析Car对象，并且GraphQL服务器无法获取Relay请求的其他数据点，从而导致返回空值，从而使先前获取的Car项目无效。

此外，Root定义无效，应为：

var Root = new GraphQLObjectType({
   name: 'Root',
   fields: {
      viewer: {
         type: GraphQLUser,
         resolve: (root, {} ) => getUser()
      },
      node: nodeDefinitions.nodeField
   }
});

错误放置的node字段定义导致GraphQL服务器抱怨无法在Root查询中查询'node'字段。

完成这些更正后，中继可以使用不同的数据点查询相同的“根”字段，而与<Route/>树中的位置无关。

尽管嵌套路由可能是相同对象类型的主/详细列表的首选，但有时希望在不相关的React组件（例如，边栏，标题等）中包含相同的数据。