Передача аргументов в поля верхнего уровня из контейнера реле

Предположим, у меня есть поле с именем country, определенное на верхнем уровне моей схемы GraphQL. Я могу запросить его следующим образом:

query {
  country(alpha2: "gb") {
    name
  }
}

В моем контейнере реле я могу указать атрибуты, которые я хотел бы вернуть с фрагментом на Country:

export default Relay.createContainer(CountryComponent, {
  fragments: {
    country: () => Relay.QL`
      fragment on Country {
        name
      }
    `
  }
}

Как я могу изменить значение аргумента alpha2 из моего компонента реакции? Я мог бы вложить поле country в какое-то произвольное поле и объявить свой релейный фрагмент родительским, но предпочел бы избегать ненужных изменений моего графика, если это возможно.


reactjs graphql relayjs
person Peter Horne    schedule 29.10.2015    source источник
comment
Если это уместно, я также использую react-router-relay   -  person Peter Horne    schedule 29.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

Как правило, мы думаем о параметрах верхнего уровня, подобных этому, как о параметрах маршрута. Думайте о них как о свойствах, которые входят в корень приложения React.

Если бы я хотел перерисовать приложение React с новыми реквизитами, я бы просто отрендерил его снова с новым реквизитом:

ReactDOM.render(<App countryCode="gb" />, …);
// …time passes; country changes
ReactDOM.render(<App countryCode="ca" />, …);

Если бы код страны был параметром Relay.Route:

class CountryRoute extends Relay.Route {
  static queries = {
    country: () => Relay.QL`
      query { country(alpha2: $countryCode) }
    `,
  };
  static paramDefinitions = {
    countryCode: {required: true},
  };
  static routeName = 'CountryRoute';
}

Я мог бы сделать что-то подобное:

ReactDOM.render(
  <Relay.RootContainer 
    Component={CountryComponent}
    route={new CountryRoute({countryCode: 'gb'})}
  />,
  …
);
// …time passes; country changes
ReactDOM.render(
  <Relay.RootContainer 
    Component={CountryComponent}
    route={new CountryRoute({countryCode: 'ca'})}
  />,
  …
);

Что касается того, как и когда выполнять повторную визуализацию с новыми параметрами маршрута, вы можете инициировать пользовательское событие из вашего компонента React со связанным прослушивателем, который вызывает повторный вызов ReactDOM.render, но поскольку вы используете react-router-relay, вы можете просто изменить код страны в URL-адресе и позволить ему повторно запустить маршрут с новым параметром countryCode.

См. также: http://facebook.github.io/relay/docs/guides-routes.html#routes-and-queries

person steveluscher    schedule 29.10.2015
comment
Спасибо. В моей ситуации изменение инициируется пользователем, выбирающим свою страну при заполнении формы (чтобы получить соответствующие часовые пояса), поэтому изменение URL-адреса здесь нежелательно. Возможно, я думаю об этом неправильно, может быть, на верхнем уровне должны отображаться только поля типа «родительский», например User? Просто кажется странным вкладывать Country, поскольку он не принадлежит ни одному родительскому типу? - person Peter Horne; 30.10.2015
comment
Звучит здорово! Вы можете изменить URL-адрес в ответ на новый выбор страны (просто добавьте его в качестве параметра запроса через history.replaceState(), и маршрутизатор заново отобразит корневой контейнер), или вы можете просто иметь прослушиватель верхнего уровня, которому вы транслируете изменения в страна — прослушиватель, который повторно отображает приложение в ответ на изменение. Не зная больше о вашем приложении, мне трудно дать более конкретную рекомендацию, чем эти две. - person steveluscher; 02.11.2015