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

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

使用 relay classic 你可以这样传递变量：

....
employee(id: $employeeId) {
  fullName
  ${MyFragmentComponent.getFragment('employee', variables)}
}

我怎样才能用 relay modern 达到同样的效果？

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 中，有一个 defining/passing 参数的指令示例。

更新：

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.

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

Pass variables to fragment container in relay modern

relayjs

relaymodern