0

假设我country在 GraphQL 架构的顶层定义了一个名为的字段。我可以通过以下方式查询它：

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

在我的中继容器中，我可以指定我希望返回的属性和片段Country：

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

如何alpha2从我的反应组件中更改参数的值？我可以将该字段嵌套country在某个任意字段下，并在父级上声明我的中继片段，但如果可能的话，我宁愿避免不必要地修改我的图表。

4

1 回答 1

1

通常，我们认为像这样的顶级参数是路由上的参数。将它们视为流入 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

于 2015-10-29T17:20:52.517 回答