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

Question

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

举个例子：

我正在使用变通方法将字段附加到 'viewer' 根节点，以便从根字段查询数据数组：

我的 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'));

with 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 组件的重新渲染现在也是 returns 一个空数组。

在后端，AllCars 组件似乎导致额外的 POST /graphql 200 277.369 ms - 94 到服务器的访问以获取片段中指定的新 type。如果 AllCars 组件只包含 'name' 字段，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')
);

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

Answer 2

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

 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 object，GraphQL 服务器无法获取 Relay 请求的额外 data-points，导致返回空值，有效地使之前获取的 Car 项无效。

此外，Root 定义无效，应该是：

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

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

经过这些更正后，无论在 <Route/> 树中的位置如何，Relay 都能够使用不同的数据点查询相同的 Root 字段。

虽然嵌套路由可能更适合 master/detail 相同类型 object 的列表，但有时需要在 non-related React 组件（例如侧边栏、 headers, 等)

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

Multiple react-router-relay routes using same Relay root query with different fragment fields

javascript

reactjs

react-router

relayjs

react-router-relay