React-starter-kit: Relay.js integration.

[shortgiraffe4]

Have you thought of setting up Relay.js for using GraphQL?

[koistya]

Yep, I'm exporing this path.. at least, would be nice to have the GraphQL ednpoint compatible with Relay.

[shortgiraffe4]

Great, I'm trying to make Relay.js working on the starter kit as well. Hope that I can make a pull request soon.

[koistya]

@shortgiraffe4 what do you think about this pattern of using Relay?

http://slides.com/koistya/universal-router#/9

[shortgiraffe4]

I am very interested in this idea. Apparently, I have observed that this implementation is kinda similar to what you are doing in react starter kit. Is that correct?

[koistya]

Yep, correct. This approach uses a very simple algorithm (see universal-router/src/match.js) and promotes asynchronous code with ES2015 async/await syntax which tends to be easier to read and write as opposed to callbacks (used in React Router as an example).

[rterysen-openroad]

@koistya It seems to be that once relay is implemented components are not as reusable. They are heavily dependent on relay. Especially on the component level with this.props.relay. Do you find this to be true as well? Once relay is implemented this starter kit will only be able to work with relay and nothing else correct?

[langpavel]

@rterysen-openroad Reusable components still can be created. Relay container components should provide props to View components. View components should not be aware of Relay.

[rterysen-openroad]

@langpavel So this.props.relay will never be utilized in a view component?

[langpavel]

@rterysen-openroad You can always separate code of component to as many files as you wish, cannot you? If you wish design some component, e.g. DateTimePicker to be reusable, you always can. You can model props shape for this component and pass down only required data and event handlers. Relay drives data abstraction. If you use Redux as dependency, component will not be reusable without it as well. Doesn't matter which data backend you use.

Exactly. Do not use props.relay and your component can be then extracted and used in different project.

[rterysen-openroad]

@langpavel Thank you! I am going give this approach a try.

[dhyegocalota]

:+1:

[pie6k]

Any progress?

[meodemsao]

wait....

[koistya]

I think with Relay, it makes a lot of sense to use declarative routes such as:

[
  {
    path: '/:username',
    component: './routes/UserProfile',
    queries: {
      viewer: 'query { viewer }',
      user: 'query { user(username: $username) }'
    }
  },
  ...
]

...where each route contains GraphQL root queries. You can see this solution implemented in react-static-boilerplate, though instead of Relay queries it uses custom queries compatible with REST API endpoints, but tweaking it to Relay should be very easy. Take a look:

• /route.json - the list of routes in JSON (declarative)
• /utils/routes-loader.js - Webpack loader that converts JSON routes to JavaScript code during compilation
• /core/router.js - the router itself that has a single API method: const result = await Router.resolve(routes, location)
• /main.js - application entry point, demonstrating how this router is used

Please upvote/downvote if you think this solution should be a part of the React Starter Kit.

[parthrao]

It would be great if you can add this to existing project. Can you make a branch for relay where you can just incorporate this to demonstrate how it works.