The last piece of this application is rendering each todo item and providing the ability to change the status of the todo. Let's take a look at this code:

import React, { Component, PropTypes } from 'react'; 
import Relay from 'react-relay'; 
import { 
  Text, 
  View, 
  Switch, 
} from 'react-native'; 
 
import styles from './styles'; 
import ChangeTodoStatusMutation from 
  './mutations/ChangeTodoStatusMutation'; 
 
// How to style the todo text, based on the 
// boolean value of the "completed" property. 
const completeStyleMap = new Map([ 
  [true, { textDecorationLine: 'line-through' }], 
  [false, {}], 
]); 
 
class Todo extends Component { 
  static propTypes = { 
    relay: PropTypes.any.isRequired, 
    viewer: PropTypes.any.isRequired, 
    todo: PropTypes.shape({ 
      text: PropTypes.string.isRequired, 
      complete: PropTypes.bool.isRequired, 
    }), 
  } 
 
  // Handles the "switch" button click. The "complete" 
  // argument is the value of the switch UI control, 
  // which is sent to the "ChangeTodoStatusMutation". 
  onValueChange = complete => 
    this.props.relay.commitUpdate( 
      new ChangeTodoStatusMutation({ 
        complete, 
        todo: this.props.todo, 
        viewer: this.props.viewer, 
      }) 
    ) 
 
  render() { 
    // The "todo" is passed in from the "TodoList" 
    // component. 
    const { 
      props: { 
        todo: { 
          text, 
          complete, 
        }, 
      }, 
      onValueChange, 
    } = this; 
 
    // The actual todo is a "<Switch>" component, 
    // and the todo item text, styled based on it's 
    // "complete" value. 
    return ( 
      <View style={styles.todoItem}> 
        <Switch 
          value={complete} 
          onValueChange={onValueChange} 
        /> 
        <Text style={completeStyleMap.get(complete)}> 
          {text} 
        </Text> 
      </View> 
    ); 
  } 
} 
 
// The fragments defined here are actually used 
// in the "TodoList" component when it runs the 
// "todos" query. We also have to tell it about 
// the fragments defined by "ChangeTodoStatusMutation". 
export default Relay.createContainer(Todo, { 
  fragments: { 
    todo: () => Relay.QL` 
      fragment on Todo { 
        complete, 
        id, 
        text, 
        ${ChangeTodoStatusMutation.getFragment('todo')}, 
      } 
    `, 
    viewer: () => Relay.QL` 
      fragment on User { 
        ${ChangeTodoStatusMutation.getFragment('viewer')}, 
      } 
    `, 
  }, 
}); 

The actual component that's rendered is quite simple—a switch control and the item text. When the user marks the todo as complete, the item text is styled as crossed off. The user can also uncheck items. The ChangeTodoStatusMutation mutation sends the request to the GraphQL backend to change the todo state. The GraphQL backend then talks to any microservices that needed to make this happen. Then, it responds with the fields that this component depends on.

The important part of this code that I want to point out is the fragments used in the Relay container. This container doesn't actually use them directly. Instead, they're used by the todos query in the TodoList component (Todo.getFrament()). This is useful because it means that we can use the Todo component in another context, with another query, and its data dependencies will always be satisfied.