It's the job of the TodoList component to render the todo list items. When AddTodoMutation takes place, the TodoList component needs to be able to render this new item. Relay takes care of updating the internal data stores where all of our GraphQL data lives. Here's a look at the item list again, with several more todos added:

Here's the TodoList component itself:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { createFragmentContainer, graphql } from 'react-relay';
import Todo from './Todo';
class TodoList extends Component {
static propTypes = {
viewer: PropTypes.object.isRequired,
relay: PropTypes.object.isRequired
};
static contextTypes = {
relay: PropTypes.shape({
variables: PropTypes.shape({
status: PropTypes.string.isRequired
}).isRequired
}).isRequired
};
render() {
const { viewer } = this.props;
return (
<View>
{viewer.todos.edges.map(edge => (
<Todo key={edge.node.id} viewer={viewer} todo={edge.node} />
))}
</View>
);
}
}
export default createFragmentContainer(
TodoList,
graphql`
fragment TodoList_viewer on User {
todos(status: $status, first: 2147483647)
@connection(key: "TodoList_todos") {
edges {
node {
id
complete
...Todo_todo
}
}
}
id
numTodos
numCompletedTodos
...Todo_viewer
}
`
);
The relevant GraphQL to get the data you need is passed as a second argument to createFragmentContainer(). This is the declarative data dependency for the component. When you you render the <Todo> component, you're passing it the edge.todo data. Now, let's see what the Todo component itself looks like.