软件简介

温馨提示：

Relay 是构建数据驱动 React 应用的 JavaScript
框架。

主要特性：

• 声明式： 不再使用一个命令式 API 与数据存储通讯。简单的使用 GraphQL 声明你的数据需求，让 Relay 理解如何，什么时候获取你的数据。

• 托管： 查询在视图后面，Relay 聚合查询成有效的网络请求，只获取你需要的数据。

• 转变 ：Relay 允许你使用 GraphQL mutations 在客户端和服务器端转变数据，提供自动数据一致，优化更新和错误处理。

简单列表：

class Tea extends React.Component {
  render() {
    var {name, steepingTime} = this.props.tea;
    return (
      <li key={name}>
        {name} (<em>{steepingTime} min</em>)
      </li>
    );
  }
}
Tea = Relay.createContainer(Tea, {
  fragments: {
    tea: () => Relay.QL`
      fragment on Tea {
        name,
        steepingTime,
      }
    `,
  },
});
class TeaStore extends React.Component {
  render() {
    return <ul>
      {this.props.store.teas.map(
        tea => <Tea tea={tea} />
      )}
    </ul>;
  }
}
TeaStore = Relay.createContainer(TeaStore, {
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        teas { ${Tea.getFragment('tea')} },
      }
    `,
  },
});
class TeaHomeRoute extends Relay.Route {
  static routeName = 'Home';
  static queries = {
    store: (Component) => Relay.QL`
      query TeaStoreQuery {
        store { ${Component.getFragment('store')} },
      }
    `,
  };
}
ReactDOM.render(
  <Relay.RootContainer
    Component={TeaStore}
    route={new TeaHomeRoute()}
  />,
  mountNode
);