RelayContainer: Expected prop `%s` to be supplied to `%s`, but ' + 'got `undefined`. Pass an explicit `null` if this is intentional

Question

I try to Implement some stuff with React, Relay and GraphQL, but I faced a Problem I dont understand and where i cant find a solution.

First I created a RootQuery and had one Component and it worked well. Now I created a Sub Component with an own fragment an i get this Error:

relay.js:1799 Warning: RelayContainer: Expected prop room to be supplied to RoomList, but got undefined. Pass an explicit null if this is intentional.

In the Networkrequest I see all the requested Data.

Here is some code:

Root Query

const RoomQuery = {
    room: (Component) => Relay.QL`
      query {
        room {
            ${Component.getFragment('room')},
        }
      }
    `
};

Route

<Route name="rooms" path="/rooms" component={Rooms} onEnter={requireAuth} queries={RoomQuery}/>

Relay Container

export default Relay.createContainer(Rooms, {
fragments: {
    room: () => Relay.QL`
    fragment on Room {
        title,
        description,
        publicKeys,
        takenKeys,
        image_filename,
        subRoomsCount,
        owner {
            fullName
        },
        ${RoomList.getFragment('room')},
    }
`,
}
});

Relay Sub Container

export default Relay.createContainer(RoomList, {
fragments: {
    room: () => Relay.QL`
    fragment on Room {
        subRooms{
            title,
            description,
            publicKeys,
            takenKeys,
            image_filename,
            availableKeys,
            owner {
                fullName
            },
            subRoomsCount
        }
    }
`,
}
});

In my React Component I use this Sub React Component like this:

<RoomList></RoomList>

I dont know if I understand something wrong but I thougt that Relay will load the Data and fill it in this.props, but there is only a relay Object.

Thanks for your help :)

Greetings

Ronny Gerndt

Answer 1

Ok, I found a solution for the problem. I just needed to change

<RoomList></RoomList>   

to

<RoomList room={this.props.room}></RoomList>

and Relay gives me my right Filled subroom List.

I hope someone else will find this useful ;)