Skip to content

Instantly share code, notes, and snippets.

@gwind
Created January 25, 2016 06:47
Show Gist options
  • Save gwind/ffb234e528579f7e5553 to your computer and use it in GitHub Desktop.
Save gwind/ffb234e528579f7e5553 to your computer and use it in GitHub Desktop.
Example: react relay confused
let React = require('react');
let ReactDOM = require('react-dom');
let Relay = require('react-relay');
class Item extends React.Component {
render() {
let { group } = this.props.store
return <p><b>{group.id}</b>: {group.name}</p>
}
};
Item = Relay.createContainer(Item, {
fragments: {
store: () => Relay.QL`
fragment on AccountRootQuery2 {
group(id:"R3JvdXA6Mw=="){
id
name
}
}
`,
},
});
class MyRoute extends Relay.Route {
static routeName = 'MyRoute';
static queries = {
store: ((Component) => {
return Relay.QL`
query root {
account2 { ${Item.getFragment('store')} },
}
`}),
};
}
import { inject_network_layer } from 'project/utils'
inject_network_layer()
let rootComponent = <Relay.RootContainer
Component={Item}
route={new MyRoute()} />;
let mountNode = document.getElementById('root');
ReactDOM.render(rootComponent, mountNode);
let React = require('react');
let ReactDOM = require('react-dom');
let Relay = require('react-relay');
class Item extends React.Component {
render() {
let { group } = this.props.store
return <p><b>{group.id}</b>: {group.name}</p>
}
};
Item = Relay.createContainer(Item, {
fragments: {
store: () => Relay.QL`
fragment on AccountRootQuery2 {
group(id:"R3JvdXA6Mw=="){
id
name
}
}
`,
},
});
const MyQueries = {
store: () => Relay.QL`
query root {
account2 { ${Item.getFragment('store')} }
}
`
};
/* also failed */
// const MyQueries = {
// root: () => Relay.QL`
// query root {
// account2
// }
// `
// };
import {Route} from 'react-router';
import {createHashHistory} from 'history';
import {RelayRouter} from 'react-router-relay';
import { inject_network_layer } from 'project/utils'
inject_network_layer()
let rootComponent = (
<RelayRouter history={createHashHistory({queryKey: false})}>
<Route
path="/" component={Item}
queries={MyQueries}
/>
</RelayRouter>
)
let mountNode = document.getElementById('root');
ReactDOM.render(rootComponent, mountNode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment