10

Relay Modern (compat)を使用しています。1 つの引数を持つフィールドを含むフラグメントがありますが、親コンポーネントから変数値を渡す方法が見つかりません。

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

現代のリレーで同じことを達成するにはどうすればよいですか?

4

1 に答える 1