RelayJS:如何通过道具设置initialVariables

Question

假设我有一个GraphQL类型的Echo，它用一些装饰来响应我所查询的任何内容。另一方面，我有一个React组件，它与message传递给它，其中包含由Echo类型确定的一些装饰。如何为initialVariables组件设置Echo？

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

此 ; } } 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( , mountNode );&schema=import { GraphQLObjectType, GraphQLSchema, GraphQLString, } from 'graphql'; let EchoType = new GraphQLObjectType({ name: 'Echo', fields: () => ({ name: { type: GraphQLString, args: { message: { type: GraphQLString } }, resolve: (echo, {message}) => `Hello, ${message}!` } }) }); let ViewerType = new GraphQLObjectType({ name: 'Viewer', fields: () => ({ echo: { type: EchoType, resolve: () => ({}) } }) }); export default new GraphQLSchema({ query: new GraphQLObjectType({ name: 'Query', fields: () => ({ viewer: { type: ViewerType, resolve: () => ({}), }, }), }), }); ">接力游乐场显示消息没有正确显示。

就上下文而言，

// 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}!`
    }
  })
});

Answer 1

我承认我对Relay不太了解，但是传递给Echo的Echo属性似乎在跟踪它(或者以其他方式影响它)。我做了以下修改：

1. 更改传递给Echo的道具名称
2. 更改componentDidMount中的属性名称： componentDidMount() { let {中继，defaultMessage} = this.props；relay.setVariables({ message: defaultMessage })；}

下面是完整的源代码(和 Relay.QL` fragment on Echo { name(message: $message) } `, }, }); class EchoApp extends React.Component { render() { return ; } } 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( , mountNode );&schema=import { GraphQLObjectType, GraphQLSchema, GraphQLString, } from 'graphql'; let EchoType = new GraphQLObjectType({ name: 'Echo', fields: () => ({ name: { type: GraphQLString, args: { message: { type: GraphQLString } }, resolve: (echo, {message}) => console.log(message) || `Hello, ${message}!` } }) }); let ViewerType = new GraphQLObjectType({ name: 'Viewer', fields: () => ({ echo: { type: EchoType, resolve: () => ({}) } }) }); export default new GraphQLSchema({ query: new GraphQLObjectType({ name: 'Query', fields: () => ({ viewer: { type: ViewerType, resolve: () => ({}), }, }), }), }); ))">指向工作示例的链接。 )

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
);