So, I'm trying to figure out Relay.js. I created a simple application that basically mimics an example on the Relay website. However, although I managed to get rid of errors in both consoles (node ββand chrome), my component does not receive the fragments specified in Raley.Container. I have no idea where the problem could be, since my application looks very similar to the Relay example.
Note that the map method on this.props.companies not available, as it is an object with 1 __dataId __ property.
First component
class App extends React.Component { render() { return ( <div> {this.props.companies.map((comapny => <Company company={company} />))} </div> ); } } export default Relay.createContainer(App, { fragments: { companies: () => Relay.QL` fragment on Companies { companies { ${Company.getFragment('company')} } } `, }, });
Second component
class Company extends React.Component { render() { return ( <div> <h1>{this.props.comapany.name}</h1> </div> ); } } export default Relay.createContainer(Company, { fragments: { company: () => Relay.QL` fragment on Company { __id, name } `, }, });
And my route
class AppHomeRoute extends Relay.Route { static routeName = 'Comapnies'; static queries = { companies: (Component) => Relay.QL` query { companies { ${Component.getFragment('companies')} } } `, }; }
Any ideas?
source share