Как передавать переменные между контейнерами реле

Question

Я ищу хороший синтаксис для передачи переменной из родительского контейнера в дочерний контейнер.

Допустим, у меня есть тезисы с глобальным списком виджетов на / и конкретные списки виджетов на /widgets/:WidgetListID,

Примечание: я использую Relay-router-relay

<Route
    path='/' component={Layout}
  >
    <IndexRoute
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
    <Route
      path='/widgets/:WidgetListID'
      component={WidgetListContainer}
      queries={ViewerQueries}
    />
  </Route>

Это то же самое <WidgetList/> компонент, представленный внутри <WidgetListContainer/> внутри <Layout/> и вот как я пытаюсь передать WidgetListID переменная:

Layout.js

class Layout extends React.Component {
  render() {
    return (
      <div>
       ...
        {children}
       ...
      </div>
    );
  }
}

WidgetListContainer.js

class WidgetListContainer extends React.Component {
  render () {
    return (
      <div>
       ...
        <WidgetList 
          viewer={viewer}
        />
      </div>
    )
  }
}

export default Relay.createContainer(WidgetListContainer, {
  initialVariables: {
    WidgetListID: null
  },
  fragments: {
    viewer: ($WidgetListID) => Relay.QL`
      fragment on User {
        ${WidgetList.getFragment('viewer', $WidgetListID)}
      }
    `,
  },
})

WidgetList.js

class WidgetList extends React.Component {
  render () {
    return (
      <div>
        <ul>
          {viewer.widgets.edges.map(edge =>
            <li key={edge.node.id}>{edge.node.widget.name}</li>
          )}
        </ul>
      </div>
    )
  }
}
export default Relay.createContainer(WidgetList, {
  initialVariables: {
    WidgetListID: null
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
         widgets(first: 10, WidgetListID:$WidgetListID) { 
          edges { 
            node { 
              id, 
              name
            } 
          } 
        } 
      }
    `,
  },
})

У меня нет проблем с настройкой WidgetListID переменная непосредственно внутри контейнера ретрансляции WidgetList, она прекрасно работает, но как только я пытаюсь передать ее из контейнера ретрансляции WidgetListContainer, у меня появляется пустой объект данных {__dataID__: "VXNlcjo="}, Тем не менее, переменная хорошо напечатана в моей функции getWidget(). Так что что-то не работает в какой-то момент, но я не могу понять, что?

Какой будет хороший синтаксис для передачи WidgetListID переменная из родительского контейнера в дочерний контейнер?

Answer 1

В WidgetListContainerизмените это:

fragments: {
    viewer: ($WidgetListID) => Relay.QL`
      fragment on User {
        ${WidgetList.getFragment('viewer', $WidgetListID)}
      }
    `,
  },

в

fragments: {
    viewer: ({WidgetListID}) => Relay.QL`
      fragment on User {
        ${WidgetList.getFragment('viewer', {WidgetListID})}
      }
    `,
  },

Первым аргументом для создателя фрагмента является реле variables, Итак, сначала вам нужно вытащить WidgetListID переменная из WidgetListContainerпеременные, а затем вы можете передать его в WidgetList.getFragment(),

Обратите внимание, что $ Символ используется только внутри Relay.QL строка шаблона. Внутри объекта переменных вы ссылаетесь на переменную по имени, без $,

Answer 2

Привет, я тоже немного боролся с этим. Изменить это:

 class WidgetListContainer extends React.Component {
  render () {
    return (
      <div>
       ...
        <WidgetList 
          viewer={viewer}
        />
      </div>
    )
  }
 }

к этому:

class WidgetListContainer extends React.Component {
  render () {
    return (
      <div>
       ...
       <WidgetList
          WidgetListID={this.props.relay.variables.WidgetListID}
          viewer={viewer}
        />
      </div>
    )
  }
}

также в контейнере реле вашего компонента WidgetList не забудьте установить начальные переменные в initialVariables: { WidgetListID: null }, эта установка сделает вашу переменную WidgetListID доступной для контейнера реле вашего компонента WidgetList.