[英]Relay Modern fragment data is null
{这是Relay Modern}
在我的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;
所以这是调用QueryRenderer的UserQuery的根。 现在是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片段包含子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
}
`
)
问题是当userList中的console.log(this.props.users)时,它返回Null。 片段userList = {}
但是当我通过将User.Component中的this.props.users传递给子节点而不使用Fragments时,它可以正常工作。
如果有人能用更好的例子来详细说明createFragmentContainer,那将是很棒的。 谢谢..
我也是新手来传递现代,但据我所知,你需要将查询过的对象传递给孩子,就像在这个例子中一样:
https://github.com/apollographql/relay-modern-hello-world/blob/master/src/App.js#L32
显然你需要使用data属性,因为它提取了正确的片段
我偶然发现了这个问题,同时试图弄清楚我是否可以以某种方式避免这样做,因为它似乎有点不必要。
据推测, GetAllUsers
:
graphql`
query UserQuery {
viewer {
users {
edges {
...userList_users
}
}
}
}
`
在这种情况下,您要确保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>
}}
/>
)
}
}
具体来说, 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.