Pass relay variables down to other components

relay-pass-variables-to-child-components-example.js

class ChildComponent extends React.Component {
  render() {
    const {hello} = this.props.greetings;
    return <h1>{hello}</h1>;
  }
}

const ChildContainer = Relay.createContainer(ChildComponent, {
  initialVariables: {
    name: 'A',
  },
  fragments: {
    greetings: () => Relay.QL`
      fragment on Greetings {
        hello(name: $name),
      }
    `,
  }
});

class ParentComponent extends React.Component {
  render() {
    // *** have to pass `name` prop here ***
    this.props.relay.setVariables({
        name: "Name",
      });
    return (
      <ChildContainer 
        greetings={this.props.greetings} 
        name={this.props.relay.variables.name} 
      />
    );
  }
}

const ParentContainer = Relay.createContainer(ParentComponent, {
  initialVariables: {
    name: 'C',
  },
  fragments: {
    greetings: ({name}) => Relay.QL`
      fragment on Greetings {
        ${ChildContainer.getFragment('greetings', {name})},
      }
    `,
  }
});

class Route extends Relay.Route {
  static routeName = 'Hello';
  static queries = {
    greetings: () => Relay.QL`
      query GreetingsQuery {
        greetings,
      }
    `,
  };
}

ReactDOM.render(
  <Relay.RootContainer
    Component={ParentContainer}
    route={new Route({name: 'C'})}
  />,
  mountNode
);

Also available on Relay Playground

@lukaswelte great example

if I do a setVariables in the parent it will reload all children?