Why can't I put more than one level of

error

Uncaught Error: Invariant Violation: Relay.QL: Expected query `viewer` to be empty. For example, use `node(id: $id)`, not `node(id: $id) { ... }`.

js-components-App.js

import 'babel/polyfill';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Widget list</h1>
        <ul>
          {this.props.edges.map(edge =>
            <li>{edge.node.name} (ID: {edge.node.id})</li>
          )}
        </ul>
      </div>
    );
  }
}

export default Relay.createContainer(App, {
  fragments: {
    edges: () => Relay.QL`
      fragment on WidgetEdge {
        node {
          id,
          name,
        },
      }
    `,
  },
});

js-routes-AppHomeRoute.js

export default class extends Relay.Route {
  static queries = {
    edges: () => Relay.QL`
      query {
        viewer {
          widgets(first: 10) {
            edges
          }
        }
      }
    `,
  };
  static routeName = 'AppHomeRoute';
}