我尝试使用React,Relay和GraphQL来实现一些东西,但我遇到了一个我不明白的问题以及无法找到解决方案的地方。
首先,我创建了一个RootQuery,并且有一个Component,它运行良好。现在我创建了一个带有自己片段的子组件,我得到了这个错误:
relay.js:1799警告:RelayContainer:预期道具
room
将提供给RoomList
,但得到undefined
。如果这是故意的,请传递明确的null
。
在Networkrequest中,我看到了所有请求的数据。
以下是一些代码:
根查询
const RoomQuery = {
room: (Component) => Relay.QL`
query {
room {
${Component.getFragment('room')},
}
}
`
};
路线
<Route name="rooms" path="/rooms" component={Rooms} onEnter={requireAuth} queries={RoomQuery}/>
中继容器
export default Relay.createContainer(Rooms, {
fragments: {
room: () => Relay.QL`
fragment on Room {
title,
description,
publicKeys,
takenKeys,
image_filename,
subRoomsCount,
owner {
fullName
},
${RoomList.getFragment('room')},
}
`,
}
});
中继子容器
export default Relay.createContainer(RoomList, {
fragments: {
room: () => Relay.QL`
fragment on Room {
subRooms{
title,
description,
publicKeys,
takenKeys,
image_filename,
availableKeys,
owner {
fullName
},
subRoomsCount
}
}
`,
}
});
在我的React组件中,我使用这个Sub React组件,如下所示:
<RoomList></RoomList>
我不知道我是否理解错误但我认为Relay将加载数据并将其填入this.props,但只有一个中继对象。
感谢您的帮助:)
问候
Ronny Gerndt
答案 0 :(得分:8)
好的,我找到了问题的解决方案。我只需要改变
<RoomList></RoomList>
到
<RoomList room={this.props.room}></RoomList>
和Relay给了我正确的填充子房间列表。
我希望其他人会觉得这很有用;)