RelayContainer：“中继”是用无效的中继上下文“未定义”呈现的

Question

我正在使用ReactJS、中继框架和GrapthQL。这是我使用中继获取数据的布局组件：

import React, { PropTypes } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Header from '../Header';
import Footer from '../Footer';
import Sidebar from '../Sidebar';
import Relay from 'react-relay';

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

class Layout extends React.Component{
    render(){
        const {children} = this.props;
        var communityList = this.props.communityList;
        return (
            <MuiThemeProvider>
                <div>
                    <Header/>
                    <Sidebar/>
                    {React.Children.only(children)}
                    <Footer />
                </div>
            </MuiThemeProvider>
        )
    }
}

Layout.propTypes = {
    children: PropTypes.element.isRequired,
};

var RelayLayout =  Relay.createContainer(Layout, {
    fragments: {
        communityList: () => Relay.QL`
        fragment on Layout {
    user(id: 11) {
        connections{
          community{
            name
            }
        }
    }
  }
    `,
    },
});


export default RelayLayout;

问题是:当我运行页面时，它会显示错误消息：

不变冲突RelayContainer：Relay(Layout)是用无效的中继上下文undefined__呈现的。确保React上下文上的relay属性符合RelayEnvironment接口。

使用GrapthQL的查询返回有效数据，所以我不认为问题是查询

Answer 1

我在做测试的时候也遇到了同样的问题。您需要用Relay.RootContainer或Relay.Renderer组件包装中继容器。如下所示：

const ViewerQuery = { viewer: () => Relay.QL`query { viewer }` };

const queryConfig = {
  queries: ViewerQuery,
  params: {},
  name: 'User'
};

<Relay.Renderer
    Container={User}
    queryConfig={ViewerQuery}
    environment={Relay.Store}
    render={({done, error, props, retry, stale}) => {}} />