React-starter-kit: How about using Relay together GraphQL?

[hienhuynhtm]

Hi guys,

I saw that Relay works very well with GraphQL, why don't we use Relay? Should I make a PR to integrate Relay to our app?

[langpavel]

PR? Yes please :-)
But it will probably ends up as feature branch or tutorial

[langpavel]

Keep in mind there is also #1057 which removes backend completely..

[hienhuynhtm]

Yeah, I'll take a look on this, it's good idea to separate API & Frontend

[koistya]

@hienhuynhtm I just added Relay integration in Node.js API Starter Kit which is deployed at reactstarter.com/graphql. If you like, you can help me integrate Relay on the serverless branch, PR #1057. Feel free to get in touch (Skype: koistya) if you bump into any issues or have questions.

[hienhuynhtm]

Yeah, I'll take a look on this branch, you very active koistya (y)

[stubailo]

I think Apollo Client could be a better choice because it is easier to integrate with the technologies already used in this starter kit. (Disclaimer: I work on Apollo)

[langpavel]

@stubailo Can be Apollo Client used on server side too for SSR? I have cookie based authentication and server side implementation for fetch wit credentials, can I use my own fetch implementation?

[stay2be]

I'm really interested in a feature/relay branch too which is showing the basic implementation of relay with RSK. I've tried it on my own, but couldn't make it work.

Problems that I'm facing with integrating Relay:
Using Universal Router's approach with imperative routes leads to the problem, that the router already executes the components when returning the route. Relay on the other hand needs only the Relay Container for extracting the information for querying, then queries the data and executes the component tree (in this case with <IsomorphicRelay.Renderer {...props} />, ref: https://github.com/denvned/isomorphic-relay).

With the current implementation, this seems to be impossible, because there is no abstract App component, but an App component which needs a context and a child component tree returned from the UniversalRouter.resolve(...).

If anyone has already a working implementation of RSK + Relay and is kind enough to share it with the community, I'm extremely grateful. :)

[frenzzy]

@stay2be you can return from routes any information to work with after UniversalRouter.resolve()

const route = {
  path: '/posts/:id',
  action() {
    return {
      title: 'Posts',
      queries: {
        viewer: Relay.QL`{ viewer }`,
        product: Relay.QL`{ posts(id: $id) }`
      },
      component: RelayContainerComponentName,
      // ...
    };
  }
};

// ...

const route = await UniversalRouter.resolve(route, '/posts/1');

ReactDOM.render(<route.component queries={route.queries} />, document.body);

[stubailo]

@langpavel yes you can pass any options that you want to fetch and SSR works great!

[langpavel]

Looks like I should try it :smile: But I don't promise feature branch yet..

[jonirrings]

@stay2be I started building a blog with this RSK, and failed to integrate relay. and i tried the IsomorphciRelay you've implied and now stopped in the mid - for the lack of a WYGIWYS online editor, and now I'm trying to build a simple editor in spare time.
There comes a bunch of features in the near future for relay, in the code name of Relay2 which is just a lot new features not version 2.0.0, like subscription and batch query, both for GraphQL and Relay.
as for integrating relay, a solution may be IsomorphicRelay + IsomorphicRelayRouter. but for now much change will goes on in relay future release, and there is another famous GraphQL client apollo-client, which may favor you the same. and easy to integrate with RSK
And why not try the solution above which an UnivesalRouter returns a Relay Component, maybe less effort needed.

[stubailo]

@jonirrings by the way, Apollo has subscriptions and batching today, might be worth a shot!

[jonirrings]

@stubailo yes, I've read your article and followed Apollo GraphQL on medium, and Apollo is a very competitive GraphQL solution.

[stay2be]

@frenzzy @jonirrings Thanks for helping me out. Apollo Client might be worth a shot. But for this specific project I need to integrate Relay. In order to get this work I've dropped Universal Router (nice work by the way!) and integrated React Router (+ Isomorphic Relay + Isomorphic Relay Router).
Maybe there is a smooth solution with Universal Router, but I couldn't figured it out in the meantime.
I know that Relay is undergoing some changes at the moment, but Facebook already promised (and they complied with it in the past), that they will will break as few things as possible with Relay 2.

For now, this stack works like a charm.
What I love about RSK is the tooling and dev support. Really a nice project to start with!

[langpavel]

I just created Apollo integration feature branch!

Check tracking PR #1147, it's awesome!

cc @koistya @frenzzy @hienhuynhtm @stubailo @jonirrings @stay2be @slackday

[stubailo]

Really excited to see this happen!

[langpavel]

Hey everyone there, when Relay 2.0 will be there, I expect that someone will kick this again! I love Apollo for things just happens, Relay can be awesome too but.. there are just talks about.. and using 1.x was not piece of cake as it looks. But yes, we are watching! :-)