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

Question

我正在使用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)}
}

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

Answer 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在官方中继文档中有一个用于定义/传递参数的指令示例。

更新:

Since relay version 1.4.0 graphql.experimental was deprecated and now all the features are supported by the regular graphql tag.

更新:

In relay version 1.5.0 graphql.experimental was removed.