relay fragment spread not working - reactjs

Question

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.
This is index.js of the app:
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(
<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 } from 'react'
import { graphql, createFragmentContainer } from '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,
} 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 => {
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())
})
The graphql schema:
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
}
This is the response I'm getting while console.log(props) on index.js:
Please help me to understand what I'm missing here. Thanks in advance.

Answer 1

I'm having the exact same problem. Basically, Relay doesn't know how to deal with queries spreading fragments on the root.
That said, you could try to refactor your query to
query frontendQuery {
allTodos {
...AllTodo_todos
}
}
and redefine your fragment container to
export default createFragmentContainer(AllTodo, {
todos: graphql`
fragment AllTodo_todos on Todo {
id
description
complete
}
`
});
In my case it's even a little bit more complicated because I'm using a refetch container and the only solution I've found so far is to put my field under another root field; the old and trusty viewer
EDIT: I found a way to avoid moving stuff under viewer. Basically you pass all the data from the QueryRenderer as a prop for the corresponding container. To have an idea see: https://github.com/facebook/relay/issues/1937