Relay Current fragment data is zero

Question

{this is Relay Modern}

In my 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 UserQuery where the QueryRenderer is called. Now the userList component ..

 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 } } ` ) 

A fragment of the user list contains information for the child user userItem ie

 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 that console.log (this.props.users) in userList, it returns Null. And fragment userList = {}

But when I do this without using fragments, just passing this.props.users from the UserQuery component for children, it works fine.

It will be great if anyone can develop createFragmentContainer with a better example. Thanks..

Answer 1

I am also new to relaying, but as I understand it, you need to pass the requested object to the child element, as in this example:

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 is extracting the correct fragment

I stumbled upon this question, trying to figure out if I could somehow avoid this, as this seems a bit unnecessary.

Answer 2

GetAllUsers is GetAllUsers something like:

 graphql` query UserQuery { viewer { users { edges { ...userList_users } } } } ` 

In this case, you want to make sure that the UserList gets the correct details:

 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, the fragment userList_users on userEdges in the UserList expects a users prop that contains the userEdges array.

Answer 3

 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> } }/>