从 Relay 容器中将参数传递给顶级字段

Question

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

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

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

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

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

Answer 1

通常，我们将这样的顶级参数视为路由上的参数。将它们视为流入 React 应用程序根目录的道具。

如果我想用新的 props 重新绘制一个 React 应用程序，我只需用新的 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