[英]Relay Modern fragment data is null
{this is Relay Modern } {这是Relay Modern}
In my UserQuery.js, 在我的UserQuery.js中,
class UserQuery extends Component {
render () {
return (
<QueryRenderer
environment={environment}
query={GetAllUsers}
render={({err, props}) => {
if(props){
return <UserList />
}
return <Text>Loading...</Text>
}
}/>
)
}
}
export default UserQuery;
So this is the root of the UserQuery where the QueryRenderer is called. 所以这是调用QueryRenderer的UserQuery的根。 Now the userList component..
现在是userList组件..
class UserList extends Component {
render () {
const users = this.props.users
return (
<View>
{this.renderUsers(users)}
</View>
)
}
renderUsers(users) {
if(!users) {
return <Text>No Users</Text>
}
return users.edges.map(user=>{
return <UserItem user={user}/>
})
}
}
module.exports = createFragmentContainer(
UserList,
graphql`
fragment userList_users on userEdges {
node {
...userItem_user
}
}
`
)
Userlist fragment contains the info for the child userItem ie Userlist片段包含子userItem的信息,即
class UserItem extends React.Component {
render() {
const user = this.props.user;
return (
<View>
<Text>{user}</Text>
</View>
)
}
}
module.exports = createFragmentContainer(
UserItem,
graphql`
fragment userItem_user on User {
username
}
`
)
The problem is when console.log (this.props.users) in userList, it returns Null. 问题是当userList中的console.log(this.props.users)时,它返回Null。 And the fragment userList={}
片段userList = {}
But when I do it without using Fragments by just passing this.props.users from the UserQuery Component to the children, it works fine. 但是当我通过将User.Component中的this.props.users传递给子节点而不使用Fragments时,它可以正常工作。
It'll be great if anyone can elaborate createFragmentContainer with a better example. 如果有人能用更好的例子来详细说明createFragmentContainer,那将是很棒的。 Thanks..
谢谢..
I am new to relay modern too, but as far as I understand you are required to pass the queried object to the child like in this example: 我也是新手来传递现代,但据我所知,你需要将查询过的对象传递给孩子,就像在这个例子中一样:
https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32 https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32
And apparently you need to use the data property, because it extracts the correct fragment 显然你需要使用data属性,因为它提取了正确的片段
I stumbled upon this question while trying to figure out if I can somehow avoid doing this, as it seems a bit unnecessary. 我偶然发现了这个问题,同时试图弄清楚我是否可以以某种方式避免这样做,因为它似乎有点不必要。
Presumably GetAllUsers
is something along the lines of: 据推测,
GetAllUsers
:
graphql`
query UserQuery {
viewer {
users {
edges {
...userList_users
}
}
}
}
`
In which case you want to make sure UserList
is getting the correct props: 在这种情况下,您要确保
UserList
获取正确的道具:
class UserQuery extends Component {
render () {
return (
<QueryRenderer
environment={environment}
query={GetAllUsers}
render={({err, props}) => {
if (props) {
return <UserList users={ this.props.viewer.users.edges } />
}
return <Text>Loading...</Text>
}}
/>
)
}
}
Specifically, fragment userList_users on userEdges
in UserList
is expecting a users
prop that contains an array of userEdges
. 具体来说,
UserList
fragment userList_users on userEdges
期望包含userEdges
数组的users
prop。
I fixed it by changing the UserList fragment
fragment userList_user on Viewer { //removed userEdges
edges {
node { //moved node to the main query
id
}
}
`
<QueryRenderer
environment={environment}
query={graphql`
query getUsersQuery {
viewer {
...userList_user
}
}
`}
render={({error, props}) => {
if(props) return <UserList users={props.viewer}/>
return <Text style={{marginTop:20}}>Loading...</Text>
}
}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.