title: fragment cannot be spread here as objects of type "Query"
body: <p>Trying out relay with react and ran into this today. Here is what I've done so far.</p>
  
  <p>Root Query:</p>
  
  <pre><code>query {
    tasks {
      id
      taskName
      taskStatus
      userId
    }
  }
  </code></pre>
  
  <p>React component hierarchy</p>
  
  <pre><code>App   
   ↳--TaskList (props: tasks)
      ↳--TaskListItem (props: task)
  </code></pre>
  
  <p>Now due to the principle of colocation I know I have to write fragments in each component to describe their data needs.</p>
  
  <p>TaskListItem.js</p>
  
  <pre><code>const TaskListItemContainer = createFragmentContainer(
      TaskListItem,
      graphql`
          fragment TaskListItem_task on task {
              id
              taskName
              taskDone
              authorId
          }
      `
  );
  </code></pre>
  
  <p>TaskList.js</p>
  
  <pre><code>const TaskListContainer = createFragmentContainer(
      TaskList,
      graphql`
          fragment TaskList_tasks on task {
              tasks {
                  ...TaskListItem_task
              }
          }
      `
  );
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>&lt;QueryRenderer
     environment={relayEnvironment}
     query={graphql`
         query AppQuery {
           ...TaskList_tasks
         }
       `
     }
  </code></pre>
  
  <p>When I run the relay compiler I get the following error.</p>
  
  <pre><code>Fragment "TaskList_tasks" cannot be spread here as objects of type "Query" can never be of type "task".
  
  App.js (3:15)
  2:             query AppQuery {
  3:               ...TaskList_tasks
                   ^
  4:             }
  </code></pre>
  
  <p>Not able to figure out how to organize the structure because of this problem. Should I modify the schema just to facilitate the structure and reuse of fragments on the client side?</p>