Relay Modern fragment data is null

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

Userlist fragment contains the info for the child userItem i.e

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. And the fragment 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.

It'll be great if anyone can elaborate createFragmentContainer with a better example. Thanks..

Answer 1

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

And apparently you need to use the data property, because it extracts the correct fragment

I stumbled upon this question while trying to figure out if I can somehow avoid doing this, as it seems a bit unnecessary.