首页 文章

将参数传递到Relay容器中的顶级字段

提问于
浏览 次
0

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

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

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

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

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

reactjs graphql relayjs

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

    回复于

相关问题