将变量传递给现代中继中的片段容器

Posted 2023-03-08

【中文标题】将变量传递给现代中继中的片段容器

【英文标题】：Pass variables to fragment container in relay modern

【发布时间】：2017-11-28 22:12:36

【问题描述】：

我正在使用Relay Modern（兼容）。我有一个片段，其中包含一个具有一个参数的字段，但我找不到从父组件传递变量值的方法：

// 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)

如何使用现代继电器实现同样的目标？

【参考方案1】：

使用@argumentDefinitions 和@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)
    
  
`

在官方中继文档的this page 中有一个用于定义/传递参数的指令示例。

更新：

由于中继 version 1.4.0 graphql.experimental 已被弃用，现在所有功能都由常规 graphql 标签支持。

更新：

在中继中 version 1.5.0 graphql.experimental 已被删除。