0

Assume I have a field called country defined at the top level of my GraphQL schema. I can query it in the following way:

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

In my relay container I can specify the attributes that I would like returned with a fragment on Country:

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

How can I change the value of the alpha2 argument from within my react component? I could nest the country field under some arbitrary field and declare my relay fragment on the parent but would rather avoid unnecessarily modifying my graph if possible.

4

1 に答える 1

1

一般的に、このようなトップレベルのパラメータはルート上のパラメータであると考えています。それらは、React アプリのルートに流れ込む小道具と考えてください。

React アプリを新しい props で再描画したい場合は、新しい props で再度レンダリングします。

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

于 2015-10-29T17:20:52.517 に答える