react-relay support ?

Hello

I tried to integrate relay into this react-starter-kit but it seems to be incompatible with the decorators.

I changed the ContactPage to use relay taken from the relay-starter-kit see below.

But I get the following errors in Chrome when I navigate to it:

Unhandled promise rejection Error: Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `Relay.QL`.

In the compiled app.js bundle I can definitely see that the babelRelayPlugin compiled the Relay Query!

I added it to the webpack config.js like this:

const JS_LOADER = {
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-routing/src'),
    path.resolve(__dirname, '../src'),
  ],
  loader: 'babel-loader',
  query: {stage: 0, plugins: ['../tools/lib/babelRelayPlugin']}
};

And in routes.js I changed it to this:

on('/contact', async () => (<Relay.RootContainer Component={ContactPage} route={new ContactRoute()} />));

Is this a known limitation, or is there a way to use relay in this starter-kit design?

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes, Component } from 'react';
import Relay from 'react-relay';
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ContactPage extends Component {

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  render() {
    const title = 'Contact Us';
    this.context.onSetTitle(title);
    return (
      <div className="ContactPage">
        <div className="ContactPage-container">
          <h1>{title}</h1>
          <p>...</p>
        </div>
        <h1>Widget list</h1>
        <ul>
          {this.props.viewer.widgets.edges.map(edge =>
              <li>{edge.node.name} (ID: {edge.node.id})</li>
          )}
        </ul>
      </div>
    );
  }

}

// export default ContactPage;

export default Relay.createContainer(ContactPage, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widgets(first: 10) {
          edges {
            node {
              id,
              name,
            },
          },
        },
      }
    `,
  },
});

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[BerndWessels]

Sure @rterysen-openroad .

I followed Relay from the early stages and was very excited, so I adopted it soon into my projects.

But the constant changes which are still happening and the complexity it forces onto the client design made it a nightmare to use. Especially mutations and connections are full of traps and limitations. Everything seems to target the one single use case that is a social timeline. Windowed Pagination for example has to be squeezed in and feels clumsy and I can’t even tell if it not breaking the cache. It is also difficult to have local state that’s not coming from Relay. So you have to combine Relay with some local flux store and they live side by side and don’t feel like one nice app architecture.

In the end I gave up since I wasn’t able to explain the value of Relay to the business. The amount of training for developers in the business and the ongoing problems were just prohibitive.

It might work well if there is only a single dev working on a smaller project, but on scale it is just not mature enough in my opinion.

That said, I did not give up on GraphQL. I think that is the best thing since sliced bread and even the business embraced it right away. That is why I build a much simpler kind of Relay and it works just great with a single flux store like Freezer. Here is a little example on how you would write your own Relay’ish kind of entity cache with a freezer store: client and server.

I will definitely follow Relay and really hope that it comes to a state one day that works on a bigger scale.

[ulani]

@BerndWessels thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.