RelayContainer:预期的'%s`提供给`%s`,但'+'得到`undefined`。如果这是故意的,则传递一个明确的`null`

时间:2016-05-03 19:17:02

标签: reactjs graphql relayjs

我尝试使用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

1 个答案:

答案 0 :(得分:8)

好的,我找到了问题的解决方案。我只需要改变

<RoomList></RoomList>   

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

和Relay给了我正确的填充子房间列表。

我希望其他人会觉得这很有用;)