RelayJS: How to set initialVariables via props
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
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:
Change the prop name passed to
Echo
:<Echo echo={this.props.viewer.echo} defaultMessage="Default"/>
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
);
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?