RelayJS: How to set initialVariables via props

Question

Lets say I have a GraphQL type Echo that echo whatever I query with some decorations. On the other hand, I have a React component that echo message passed to it with some decorations determined by Echo type. How can I set initialVariables for the Echo component?

I read that setting props sets initialVariables, however that does not work. I have tried componentDidMount, but that does not work too.

This Relay Playground shows that message is not being displayed correctly.

For context,

// This component consumes `Echo` type
class Echo extends React.Component {
  componentDidMount() {
    let {relay, message} = this.props; 

    relay.setVariables({
      message
    });
  }

  render() {
    let name = '';
    if (this.props.echo) {
      name = this.props.echo.name;
    }

    return (
      <li>Message: {name}</li>
    );
  }
}

Echo = Relay.createContainer(Echo, {
  // By default `message` is null
  initialVariables: {
    message: null
  },

  fragments: {
    echo: () => Relay.QL`
      fragment on Echo {
        name(message: $message)
      }
    `,
  },
});

This is the type that resolve with an echo

let EchoType = new GraphQLObjectType({
  name: 'Echo',
  fields: () => ({
    name: {
      type: GraphQLString,
      args: {
        message: {
          type: GraphQLString
        }
      },
      resolve: (echo, {message}) => `Hello, ${message}!`
    }
  })
});

Answer 1

I'll admit I don't know a whole lot about Relay, but the message property passed to Echo seems to be shadowing it (or otherwise affecting it). I made the following changes:

1. Change the prop name passed to Echo:

   <Echo echo={this.props.viewer.echo} defaultMessage="Default"/>
   

2. Change the property name in componentDidMount:

   componentDidMount() {
     let {relay, defaultMessage} = this.props; 
   
     relay.setVariables({
       message: defaultMessage
     });
   }
   

Here is the full source (and a link to a working example):

class Echo extends React.Component {
  componentDidMount() {
    let {relay, defaultMessage} = this.props; 

    relay.setVariables({
      message: defaultMessage
    });
  }

  render() {
    let name = '';
    if (this.props.echo) {
      name = this.props.echo.name;
    }

    return (
      <li>Message: {name}</li>
    );
  }
}
Echo = Relay.createContainer(Echo, {
  initialVariables: {
    message: ""
  },
  fragments: {
    echo: () => Relay.QL`
      fragment on Echo {
        name(message: $message)
      }
    `,
  },
});

class EchoApp extends React.Component {
  render() {
    return <ul>
      <Echo echo={this.props.viewer.echo} defaultMessage="Default"/>
    </ul>;
  }
}
EchoApp = Relay.createContainer(EchoApp, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        echo { ${Echo.getFragment('echo')} },
      }
    `,
  },
});

class EchoRoute extends Relay.Route {
  static routeName = 'Home';
  static queries = {
    viewer: (Component) => Relay.QL`
      query {
        viewer { ${Component.getFragment('viewer')} },
      }
    `,
  };
}

ReactDOM.render(
  <Relay.RootContainer
    Component={EchoApp}
    route={new EchoRoute()}
  />,
  mountNode
);