RelayContainer: `Relay` был визуализирован с недопустимым контекстом Relay `undefined`

я использую 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) был обработан с недопустимым контекстом Relay undefined. Убедитесь, что свойство relay в контексте React соответствует интерфейсу RelayEnvironment.

Запрос с использованием GrapthQL возвращает действительные данные, поэтому я не думаю, что проблема в запросе.


reactjs graphql relay
person methis    schedule 10.10.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

У меня была такая же проблема, когда я запускал свои тесты. Вам необходимо обернуть контейнер Relay компонентом 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}) => {}} />
person dahveed707    schedule 01.12.2016