Search code examples
relayjsgraphqlgraphql-js

How does fragment composition work in Relay?


Let's use the TODO example. In TodoList it(Line 81) has a fragment composed as

todos(status: $status, first: $limit) {
  edges {
    node {
      id,
      ${Todo.getFragment('todo')},
    },
  },
  ....
}

And now if I add a loop

this.props.viewer.todos.edges.map(edge =>
console.log(edge.node.text)
);

to function renderTodos() at Line 30, it will output undefined

The interesting thing is, if we add text to to the fragment like below

todos(status: $status, first: $limit) {
  edges {
    node {
      id,
      text,
      ${Todo.getFragment('todo')},
    },
  },
  ....
}

It actually "declared" text twice(declare in Todo component as well) and the loop works perfectly.

My question is, why it is not possible to get the "properties" back from a composition even though they are returned by Graphql Server?


Solution

  • Thanks to hueyp#7485 at #relay channel.

    He pointed out it is an intended behaviour by design.

    https://facebook.github.io/relay/docs/thinking-in-relay.html#data-masking