RelayJS:如何通过 props 设置 initialVariables
RelayJS: How to set initialVariables via props
假设我有一个 GraphQL 类型 Echo
,它用一些修饰来回应我查询的任何内容。另一方面,我有一个响应 message
传递给它的 React 组件,带有一些由 Echo
类型确定的装饰。如何为 Echo
组件设置 initialVariables
?
我读到设置道具集 initialVariables
,但这不起作用。我试过componentDidMount
,但还是不行。
这 Relay Playground 表明消息没有正确显示。
对于上下文,
// 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)
}
`,
},
});
这是用回显解析的类型
let EchoType = new GraphQLObjectType({
name: 'Echo',
fields: () => ({
name: {
type: GraphQLString,
args: {
message: {
type: GraphQLString
}
},
resolve: (echo, {message}) => `Hello, ${message}!`
}
})
});
我承认我对 Relay 了解不多,但是传递给 Echo
的 message
属性 似乎在掩盖它(或以其他方式影响它) .我做了以下更改:
更改传递给 Echo
的道具名称:
<Echo echo={this.props.viewer.echo} defaultMessage="Default"/>
更改 componentDidMount
中的 属性 名称:
componentDidMount() {
let {relay, defaultMessage} = this.props;
relay.setVariables({
message: defaultMessage
});
}
这是完整的来源(和 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
);
假设我有一个 GraphQL 类型 Echo
,它用一些修饰来回应我查询的任何内容。另一方面,我有一个响应 message
传递给它的 React 组件,带有一些由 Echo
类型确定的装饰。如何为 Echo
组件设置 initialVariables
?
我读到设置道具集 initialVariables
,但这不起作用。我试过componentDidMount
,但还是不行。
这 Relay Playground 表明消息没有正确显示。
对于上下文,
// 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)
}
`,
},
});
这是用回显解析的类型
let EchoType = new GraphQLObjectType({
name: 'Echo',
fields: () => ({
name: {
type: GraphQLString,
args: {
message: {
type: GraphQLString
}
},
resolve: (echo, {message}) => `Hello, ${message}!`
}
})
});
我承认我对 Relay 了解不多,但是传递给 Echo
的 message
属性 似乎在掩盖它(或以其他方式影响它) .我做了以下更改:
更改传递给
Echo
的道具名称:<Echo echo={this.props.viewer.echo} defaultMessage="Default"/>
更改
componentDidMount
中的 属性 名称:componentDidMount() { let {relay, defaultMessage} = this.props; relay.setVariables({ message: defaultMessage }); }
这是完整的来源(和 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
);