relay fragment spread not working

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