search

lvarayut / relay-fullstack

:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
https://lvarayut.github.io/relay-fullstack/
MIT License
986 stars 126 forks source link

Have you figured out how to load data into separate components using containers? #8

Closed alex-cory closed 8 years ago

alex-cory commented 8 years ago

For instance, I tried adding a <Blog/> component (with a BlogContainer) to <App/> but when I try to access this.props.viewer it isn't defined.

When I update the Route.js file by adding a route with /blog it will load the data when I navigate to localhost:3000/blog, but Ideally it would just load the data on page load.

I noticed you had a similar issue with <Footer/> and you had to pass props down instead of loading the data into it using a FooterContainer.

Any idea how to get this to work?

lvarayut commented 8 years ago

Could you show me your code? I have been digging into the problem of the Footer component for a while. I found that when I used the getFragment method, the data has been fetched correctly. However, it didn't get bound to the this.props.viewer for some reason.

jg123 commented 8 years ago

I posted a pull request (#9) with a working footer fragment. The viewer prop is populated. The issue was mainly importing FooterContainer instead of FooterComponent to get it to work.

alex-cory commented 8 years ago

I got it to work this way as well. I just didn't think it was required to pass the viewer prop down and use the getFragment method. Right on though :)

jg123 commented 8 years ago

We are working on a separate relay-react app and the only way we could have access to the props were to pass them down. It seems to break the decoupling, but otherwise it doesn't work.