title: Recursive data & components, later fetches throwing an error
body: <p>First off my graphql data model:</p>
  
  <pre class="lang-js prettyprint-override"><code>type Human {
    id: !String,
    name: !String,
    children: [Human]
  }
  </code></pre>
  
  <p>The only route (relay route config) I'm atm using:</p>
  
  <pre class="lang-js prettyprint-override"><code>class extends Relay.Route {
    static queries = {
      human: () =&gt; Relay.QL`query RootQuery { viewer }`
    };
    static routeName = 'AppHomeRoute';
  }
  </code></pre>
  
  <p>The list component:</p>
  
  <pre class="lang-js prettyprint-override"><code>class HumanList extends Component {
    render() {
      let {children} = this.props.human;
  
      let subListsHTML = human ? children.map(child =&gt; (
        &lt;HumanListItem key={child.id} human={child}/&gt;
      )) : '';
  
      return &lt;ul&gt;{subListsHTML}&lt;/ul&gt;;
    }
  }
  
  export default Relay.createContainer(HumanList, {
    fragments: {
      human: () =&gt;  Relay.QL`
        fragment on Human {
          children {
            id,
            ${HumanListItem.getFragment('human')}
          }
        }
      `
    }
  });
  </code></pre>
  
  <p>The list item component:</p>
  
  <pre class="lang-js prettyprint-override"><code>class HumanListItem extends Component {
    state = {expanded: false};
  
    render() {
      let {human} = this.props;
  
      let sublistHTML = '';
      if (this.state.expanded) {
        sublistHTML = &lt;ul&gt;&lt;HumanList human={human}/&gt;&lt;/ul&gt;;
      }
  
      return (
        &lt;li&gt;
          &lt;div onClick={this.onClickHead.bind(this)}&gt;{human.name}&lt;/div&gt;
          {sublistHTML}
        &lt;/li&gt;
      );
    }
  
    onClickHead() {
      this.props.relay.setVariables({expanded: true});
      this.setState({expanded: true});
    }
  
  }
  
  HumanListItem.defaultProps = {viewer: {}};
  
  export default Relay.createContainer(HumanListItem, {
  
    initialVariables: {
      expanded: false
    },
  
    fragments: {
      human: (variables) =&gt;  Relay.QL`
        fragment on Human {
          name,
          ${HumanList.getFragment('human').if(variables.expanded)}
        }
      `
    }
  
  });
  </code></pre>
  
  <p>Which runs fine for the root list. But as soon as I click on a ListItem and it is expanded, I get the following error:</p>
  
  <p><code>Warning: RelayContainer: Expected prop 'human' supplied 'HumanList' to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this component's fragment.</code></p>
  
  <p>I can't make much sense of it, since the data I'm passing is not mocked but directly fetched by Relay as can be seen in the HumanList comp.</p>