RelayContainer：`Relay` 被渲染时使用了无效的 Relay 上下文`undefined`答案

【问题标题】：RelayContainer: `Relay` was rendered with invalid Relay context `undefined`RelayContainer：`Relay` 被渲染时使用了无效的 Relay 上下文`undefined`
【发布时间】：2017-02-18 10:11:58
【问题描述】：

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

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;

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

Invariant Violation RelayContainer：Relay(Layout) 使用无效的中继上下文 undefined 呈现。确保 relay 属性在 React 上下文符合RelayEnvironment 接口。

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

【问题讨论】：

标签： reactjs graphql relay

【解决方案1】：

我在运行测试时遇到了同样的问题。您需要使用 Relay.RootContainer 或 Relay.Renderer 组件包装 Relay 容器。像这样：

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}) => {}} />

【讨论】：