[Relay] Support for Relay GraphQL needed.

[BerndWessels]

Hello

It would be great if the hot-middleware could update a component when its Relay GraphQL Query changes. At the moment it is not aware of it and forces the developer to manually do a full page reload which destroys his current application state.

In this example

import React from 'react';
import Relay from 'react-relay';

/**
 * The Home component.
 */
class Home extends React.Component {
  // Expected properties.
  static propTypes = {
    viewer: React.PropTypes.object.isRequired
  };
  // Initialize the component.
  constructor(props) {
    super(props);
  }
  // Render the component.
  render() {
    // Return the component UI.
    return (
      <div>
        <h1>Widget list</h1>
        <ul>
          {this.props.viewer.widgets.edges.map(edge =>
              <li key={edge.node.id}>{edge.node.name} (ID: {edge.node.id})</li>
          )}
        </ul>
      </div>
    );
  }
}

/**
 * The home data container.
 */
export default Relay.createContainer(Home, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widgets(first: 5) {
          edges {
            node {
              id,
              name,
            },
          },
        },
      }
    `
  }
});

We should be able to make a change to the Query and the hot-middleware should update the component.

Hope it will be easy for you to add this feature - it would improve React development hugely.

Thank you

[gaearon]

This will probably be solved by #26 when it's implemented.

Can you please say whether it works with React Hot Loader?

[BerndWessels]

@gaearon It didn't work for me. I hope your big rewrite for babel 6 compatibility will fix this issue too.
Thanks
Bernd

[cesarandreu]

As a quick hack, I changed getDisplayName to:

  function getDisplayName(node) {
    if (node.arguments[0].properties) {
      const property = find(node.arguments[0].properties, node => node.key.name === 'displayName');
      return property && property.value.value;
    } else {
      return node.arguments[0].name;
    }
  }

And I updated my babel plugin config with the following:

[
  "react-transform",
  {
    "transforms": [
      {
        "transform": "react-transform-hmr",
        "imports": [
          "react"
        ],
        "locals": [
          "module"
        ]
      }
    ],
    "factoryMethods": ["React.createClass", "Relay.createContainer"]
  }
]

This makes it so hotloading will work when using Relay. It won't reload your fragments and re-fetch data... But it enables you to at least iterate on components, so I'd view it as an improvement.

[gaearon]

I’m curious whether the approach from reduxjs/redux#1455 might help here. Namely, just nuke your components and mount new versions of them without React Transform altogether.

[gaearon]

@BerndWessels

Thanks again for raising this.
I’m closing because you have several options:

• try the workaround I described in [Relay] Support for Relay GraphQL needed. #45 (comment)
• wait for some solution to Check all exports for being React components #26 which looks like one possible cause of this issue
• take the time to dive in, figure out why it doesn’t work, and maybe contribute that support 😉

I don’t plan to personally work on this in near term but I don’t see why it couldn’t be made to work given some effort.

@cesarandreu

This makes it so hotloading will work when using Relay. It won't reload your fragments and re-fetch data... But it enables you to at least iterate on components, so I'd view it as an improvement.

I’m rather confused. Babel plugin should find the inner component and force its re-rendering on changes regardless of whether it is wrapped in a Relay container or anything else. Is this not the case? Would you like to investigate why?