reactjs - relay fragment spread not working -

i'm in learning process of relay , facing wired issue. relay not returning data network response if use fragment spread operator (actual data returning graphql, confirmed network tab). if define field requirements in query itself, returns data.

this index.js of app:

import react 'react' import reactdom 'react-dom' import {   graphql,   queryrenderer } 'react-relay' import environment './relay/environment' import alltodo './components/alltodo'  const query = graphql`   query frontendquery {     ...alltodo_todos   } `  reactdom.render(   <queryrenderer     environment={environment}     query={query}     render={({ error, props }) => {       if (error) return <div>{error}</div>       else if (props) {         console.log(props)         return <alltodo { ...props } />       }       else return <div>loading...</div>     }}   />,   document.getelementbyid('root') ) 

alltodo component:

import react, { component } 'react' import { graphql, createfragmentcontainer } 'react-relay'  class alltodo extends component {   render() {     return (       <div>         { this.props.todos.map(todo => {           <div>{ todo.id } { todo.description }</div>         }) }       </div>     )   } }  export default createfragmentcontainer(alltodo, graphql`   fragment alltodo_todos on rootquerytype {     alltodos {       id       description       complete     }   } `); 

relay environment:

import {   environment,   network,   recordsource,   store, } 'relay-runtime' import { backend_url } '../../constants'  // function fetches results of operation (query/mutation/etc) // , returns results 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 => {     return response.json();   }); }  // network layer fetch function const network = network.create(fetchquery);  // export environment export default new environment({   network: network,   store: new store(new recordsource()) }) 

the graphql schema:

schema {   query: rootquerytype   mutation: rootmutationtype }  type rootmutationtype {   # create new todo item   createtodo(description: string): todo    # update todo item   updatetodo(id: string, description: string, complete: boolean): todo    # delete single todo item   deletetodo(id: string): todo }  type rootquerytype {   # list of todo items   alltodos: [todo]    # single todo item   todo(id: string): todo }  # single todo item type todo {   id: string   description: string   complete: boolean } 

this response i'm getting while console.log(props) on index.js:

please me understand i'm missing here. in advance.

i'm having exact same problem. basically, relay doesn't know how deal queries spreading fragments on root.

that said, try refactor query to

query frontendquery {   alltodos {     ...alltodo_todos   } } 

and redefine fragment container to

export default createfragmentcontainer(alltodo, {   todos: graphql`     fragment alltodo_todos on todo {       id       description       complete     }   ` }); 

in case it's little bit more complicated because i'm using refetch container , solution i've found far put field under root field; old , trusty viewer

edit: found way avoid moving stuff under viewer. pass data queryrenderer prop corresponding container. have idea see: https://github.com/facebook/relay/issues/1937