Declarative data dependencies

Relay uses the term colocation to describe declarative data dependencies that live beside the component that uses the data. This means that we don't have to go digging around for action creator functions that actually get the component data that is scattered across several modules. With colocation, we can see exactly what the component needs.

Let's get a taste of what this looks like. If you want to display the first and last name of a user, you need to tell Relay that your component needs this data. Then, you can rest assured that the data will always be there for your component. Here's an example:

const User = ({ first, last }) => ( 
  <section> 
    <p>{first}</p> 
    <p>{last}</p> 
  </section> 
); 
 
const UserContainer = Relay.createContainer(User, { 
  fragments: { 
    user: () => Relay.QL` 
      fragment on User { 
        first, 
        last, 
     } 
    `, 
  }, 
}); 

We have two components...