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

Posted 2023-03-08

【中文标题】从 Relay 容器中将参数传递给***字段

【英文标题】：Passing arguments to top level fields from within a Relay container

【发布时间】：2016-01-29 16:05:45

【问题描述】：

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

query 
  country(alpha2: "gb") 
    name
  

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

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

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

【问题讨论】：

如果相关，我也在使用react-router-relay

【参考方案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

【讨论】：

谢谢。在我的情况下，更改是由用户在填写表单（以获取相应的时区）时选择他们的国家/地区触发的，因此在这里更改 URL 是不可取的。也许我在想这个错误，也许只有'父'类型字段应该在顶层公开，例如User？嵌套Country 似乎很奇怪，因为它不属于任何父类型？

听起来不错！您可以更改 URL 以响应国家/地区的新选择（只需通过 history.replaceState() 将其添加为查询参数，并让路由器重新呈现根容器），或者您可以简单地拥有一个向其广播更改的***侦听器to the country – 一个监听器，它会根据变化重新渲染应用程序。在不了解您的应用的情况下，我很难给出比这两个更具体的建议。