Javascript 使用具有不同片段字段的相同中继根查询的多个react路由器中继路由
我遇到了一个问题,当使用相同的根查询在两个相邻的react路由器中继路由组件内请求数据时,第二个路由组件中的graphql服务器查询会使先前从第一个路由组件检索到的数据无效 例如: 我正在使用变通方法将字段附加到“查看器”根节点,以便从根字段查询数据数组: My schema.js包含以下查看器(用户)类型和根目录的定义:Javascript 使用具有不同片段字段的相同中继根查询的多个react路由器中继路由,javascript,reactjs,react-router,relayjs,react-router-relay,Javascript,Reactjs,React Router,Relayjs,React Router Relay,我遇到了一个问题,当使用相同的根查询在两个相邻的react路由器中继路由组件内请求数据时,第二个路由组件中的graphql服务器查询会使先前从第一个路由组件检索到的数据无效 例如: 我正在使用变通方法将字段附加到“查看器”根节点,以便从根字段查询数据数组: My schema.js包含以下查看器(用户)类型和根目录的定义: var GraphQLUser = new GraphQLObjectType({ name: 'User', isTypeOf: function(obj) {
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'));
现在,如果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
}
}
}
}`,
},
})
发生的情况是,在路径“/”上呈现应用程序组件时,将毫无问题地返回cars数组。但是,一旦呈现“/cars”路径,“this.props.viewer.cars”上的结果数组为空。此外,返回路径“/”以重新呈现应用程序组件现在也会返回空数组
在后端,AllCars组件似乎会导致额外的POST/graphql 200 277.369 ms-94
到服务器的行程,以获取片段中指定的新类型。
如果AllCars组件仅包含“name”字段,则Relay不会发出另一个服务器请求,而是使用数据填充阵列(假定是从初始应用程序组件服务器请求缓存的数据)
难道不可能从任何一个组件获取车辆数组,而中继获取片段中指定的任何附加数据字段,而不管它们在路线中出现的顺序如何
任何帮助都将不胜感激 (作为答案发布,因为我无法设置注释中的代码格式。)
您描述的场景听起来非常适合使用嵌套路由:
ReactDOM.render(
<Router createElement={ReactRouterRelay.createElement}>
<Route path="/" component={App} queries={ViewerQueries}>
<Route path="/cars" component={AllCars} queries={ViewerQueries} />
</Route>
</Router>,
document.getElementById('ReactContainer')
);
ReactDOM.render(
,
document.getElementById('ReactContainer')
);
如果您仍然看到具有该结构的空数组,是否可以提供一个指向包含通过网络发送的查询和响应的摘要的链接?对于schema.js
文件中的(示例)Car
类型,问题最终无效nodededefinitions
。
我最终使用的节点定义是:
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服务器无法获取中继请求的其他数据点,导致返回空值,从而有效地使以前获取的Car
项无效
此外,根定义无效,应为:
var Root = new GraphQLObjectType({
name: 'Root',
fields: {
viewer: {
type: GraphQLUser,
resolve: (root, {} ) => getUser()
},
node: nodeDefinitions.nodeField
}
});
放置错误的节点
字段定义导致GraphQL服务器抱怨无法在根查询上查询“节点”字段
在这些更正之后,中继能够使用不同的数据点查询相同的根字段,而不管在
树中的位置如何
尽管对于相同对象类型的主/明细表,嵌套路由可能是首选,但有时需要在非相关的React组件(例如侧栏、标题等)中包含相同的数据。谢谢,这可能是处理相同源数据类型查询的首选方法。但是,我现在将它保持打开状态,并且我将尝试找到一种不嵌套处理原始场景的方法,因为能够在非嵌套的上查询相同的数据源类型(包括不同的数据元素)可能会很有用。可能路由的只应该使用不同的查询对象,但我需要对此进行测试。
var Root = new GraphQLObjectType({
name: 'Root',
fields: {
viewer: {
type: GraphQLUser,
resolve: (root, {} ) => getUser()
},
node: nodeDefinitions.nodeField
}
});