Question

我正在使用ReactJS，Relay Framework和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呈现。确保relay属性 React上下文符合RelayEnvironment接口。

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

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

RelayContainer：`Relay`使用无效的Relay上下文`undefined`呈现

1 个答案: