javascript - 使用具有不同片段字段的相同中继根查询的多个 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 组件服务器请求中缓存)。

难道不应该从任一组件获取汽车数组吗？无论它们在 route 出现的顺序如何，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')
);

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