RelayJS：如何通过道具设置初始变量

Posted 2023-03-08

【中文标题】RelayJS：如何通过道具设置初始变量

【英文标题】：RelayJS: How to set initialVariables via props

【发布时间】：2016-04-02 05:58:59

【问题描述】：

假设我有一个 GraphQL 类型Echo，它可以用一些装饰来回显我查询的任何内容。另一方面，我有一个 React 组件，它回显 message 传递给它，并带有一些由 Echo 类型确定的装饰。如何为Echo 组件设置initialVariables？

我读到设置道具设置initialVariables，但这不起作用。我试过componentDidMount，但也没有用。

这个Relay Playground 表明消息没有正确显示。

对于上下文，

// This component consumes `Echo` type
class Echo extends React.Component 
  componentDidMount() 
    let relay, message = this.props; 

    relay.setVariables(
      message
    );
  

  render() 
    let name = '';
    if (this.props.echo) 
      name = this.props.echo.name;
    

    return (
      <li>Message: name</li>
    );
  


Echo = Relay.createContainer(Echo, 
  // By default `message` is null
  initialVariables: 
    message: null
  ,

  fragments: 
    echo: () => Relay.QL`
      fragment on Echo 
        name(message: $message)
      
    `,
  ,
);

这是通过回显解析的类型

let EchoType = new GraphQLObjectType(
  name: 'Echo',
  fields: () => (
    name: 
      type: GraphQLString,
      args: 
        message: 
          type: GraphQLString
        
      ,
      resolve: (echo, message) => `Hello, $message!`
    
  )
);

【参考方案1】：

我承认我对 Relay 知之甚少，但传递给 Echo 的 message 属性似乎在影响它（或以其他方式影响它）。我做了以下更改：

更改传递给Echo的道具名称：

<Echo echo=this.props.viewer.echo defaultMessage="Default"/>

更改componentDidMount中的属性名称：

componentDidMount() 
  let relay, defaultMessage = this.props; 

  relay.setVariables(
    message: defaultMessage
  );

这是完整的来源（和a link to a working example）：

class Echo extends React.Component 
  componentDidMount() 
    let relay, defaultMessage = this.props; 

    relay.setVariables(
      message: defaultMessage
    );
  

  render() 
    let name = '';
    if (this.props.echo) 
      name = this.props.echo.name;
    

    return (
      <li>Message: name</li>
    );
  

Echo = Relay.createContainer(Echo, 
  initialVariables: 
    message: ""
  ,
  fragments: 
    echo: () => Relay.QL`
      fragment on Echo 
        name(message: $message)
      
    `,
  ,
);

class EchoApp extends React.Component 
  render() 
    return <ul>
      <Echo echo=this.props.viewer.echo defaultMessage="Default"/>
    </ul>;
  

EchoApp = Relay.createContainer(EchoApp, 
  fragments: 
    viewer: () => Relay.QL`
      fragment on Viewer 
        echo  $Echo.getFragment('echo') ,
      
    `,
  ,
);

class EchoRoute extends Relay.Route 
  static routeName = 'Home';
  static queries = 
    viewer: (Component) => Relay.QL`
      query 
        viewer  $Component.getFragment('viewer') ,
      
    `,
  ;


ReactDOM.render(
  <Relay.RootContainer
    Component=EchoApp
    route=new EchoRoute()
  />,
  mountNode
);

【讨论】：

这正是我想要的！感觉就像是 Relay 缺少的解决方法:)

谢谢！这绝对是一场闹剧。我认为重点是您将变量传递给设置为道具，而不是您必须传递名称略有不同的道具并自己设置它们（您是对的，有某种阴影正在发生）。我在这上面浪费了几个小时:-(

@jbrown 我也是这么想的——而且更没有意义的是，如果你这样做，我可以看到 this.props.relay.variables.message 是传递给组件的道具，但组件不显示我期望的数据； this.props.echo 未定义。

@MichelleTilley 是的，那是最让我困惑的部分。