我在用着现代接力(兼容)。我有一个片段,其中包含一个具有一个参数的字段,但我找不到一种从父组件传递变量值的方法:
// MyFragmentComponent.jsx
class MyFragmentComponent extends Component {...}
const fragments = {
employee: graphql`
fragment MyFragmentComponent_employee on Employee {
hoursWorked(includeOvertime: $includeOvertime)
dob
fullName
id
}
`,
}
export default Relay.createFragmentContainer(MyFragmentComponent, fragments)
它最终会说$includeOvertime
没有定义。渲染该组件的上下文如下所示:
// MyRootComponent.jsx
class MyRootComponent extends Component {
render() {
const { employee } = this.props
const includeOvertime = //... value is available here
return (
<div>
<MyFragmentComponent employee={employee} />
</div>
)
}
}
const query = graphql`
query MyRootComponentQuery($employeeId: String!) {
employee(id: $employeeId) {
fullName
...MyFragmentComponent_employee
}
}
`
export default MyUtils.createQueryRenderer(MyRootComponent, query) // this just returns a QueryRenderer
使用经典中继,您可以这样传递变量:
....
employee(id: $employeeId) {
fullName
${MyFragmentComponent.getFragment('employee', variables)}
}
我怎样才能用现代继电器达到同样的效果?
Using @argumentDefinitions
and @arguments
指令似乎是要走的路。在 1.4.0 之前的中继版本中graphql.experimental
必须使用而不是graphql
.
在片段定义中:
const fragments = {
employee: graphql`
fragment MyFragmentComponent_employee on Employee
@argumentDefinitions(includeOvertime: { type: "Boolean", defaultValue: false }) {
hoursWorked(includeOvertime: $includeOvertime)
dob
fullName
id
}
`,
}
如果您希望参数是必需的:
@argumentDefinitions(includeOvertime: { type: "Boolean!" })
在父组件中,您应该为片段指定参数,如下所示:
const query = graphql`
query MyRootComponentQuery($employeeId: String!, $includeOvertime: Boolean) {
employee(id: $employeeId) {
fullName
...MyFragmentComponent_employee @arguments(includeOvertime: $includeOvertime)
}
}
`
In 这一页在官方中继文档中,有一个用于定义/传递参数的指令示例。
UPDATE:
自中继版本1.4.0 graphql.experimental
已弃用,现在常规版本支持所有功能graphql
tag.
UPDATE:
中继中版本1.5.0 graphql.experimental
去掉了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)