title: relay fragment spread not working
body: <p>I'm in the learning process of relay and facing a very wired issue. Relay is not returning the data from network response if I use fragment spread operator (actual data is returning from graphql, confirmed from the network tab). But if I define the field requirements in the query itself, it returns data.</p>
  
  <p>This is <code>index.js</code> of the app:</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import {
    graphql,
    QueryRenderer
  } from 'react-relay'
  import environment from './relay/environment'
  import AllTodo from './components/AllTodo'
  
  const query = graphql`
    query frontendQuery {
      ...AllTodo_todos
    }
  `
  
  ReactDOM.render(
    &lt;QueryRenderer
      environment={environment}
      query={query}
      render={({ error, props }) =&gt; {
        if (error) return &lt;div&gt;{error}&lt;/div&gt;
        else if (props) {
          console.log(props)
          return &lt;AllTodo { ...props } /&gt;
        }
        else return &lt;div&gt;loading...&lt;/div&gt;
      }}
    /&gt;,
    document.getElementById('root')
  )
  </code></pre>
  
  <p><code>AllTodo</code> component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { graphql, createFragmentContainer } from 'react-relay'
  
  class AllTodo extends Component {
    render() {
      return (
        &lt;div&gt;
          { this.props.todos.map(todo =&gt; {
            &lt;div&gt;{ todo.id } { todo.description }&lt;/div&gt;
          }) }
        &lt;/div&gt;
      )
    }
  }
  
  export default createFragmentContainer(AllTodo, graphql`
    fragment AllTodo_todos on RootQueryType {
      allTodos {
        id
        description
        complete
      }
    }
  `);
  </code></pre>
  
  <p>Relay <code>environment</code>:</p>
  
  <pre><code>import {
    Environment,
    Network,
    RecordSource,
    Store,
  } from 'relay-runtime'
  import { BACKEND_URL } from '../../constants'
  
  // a function that fetches the results of an operation (query/mutation/etc)
  // and returns its results as a Promise:
  function fetchQuery(
    operation,
    variables,
    cacheConfig,
    uploadables,
  ) {
    return fetch(BACKEND_URL + '/graphql', {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        query: operation.text,
        variables,
      }),
    }).then(response =&gt; {
      return response.json();
    });
  }
  
  // a network layer from the fetch function
  const network = Network.create(fetchQuery);
  
  // export the environment
  export default new Environment({
    network: network,
    store: new Store(new RecordSource())
  })
  </code></pre>
  
  <p>The graphql <code>schema</code>:</p>
  
  <pre><code>schema {
    query: RootQueryType
    mutation: RootMutationType
  }
  
  type RootMutationType {
    # Create a new todo item
    createTodo(description: String): Todo
  
    # Update a todo item
    updateTodo(id: String, description: String, complete: Boolean): Todo
  
    # Delete a single todo item
    deleteTodo(id: String): Todo
  }
  
  type RootQueryType {
    # List of all todo items
    allTodos: [Todo]
  
    # A single todo item
    todo(id: String): Todo
  }
  
  # A single todo item
  type Todo {
    id: String
    description: String
    complete: Boolean
  }
  </code></pre>
  
  <p>This is the response I'm getting while <code>console.log(props)</code> on <code>index.js</code>:
  <a href="https://i.stack.imgur.com/2gVFh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2gVFh.png" alt="response from relay"></a></p>
  
  <p>Please help me to understand what I'm missing here. Thanks in advance.</p>