Relay uses the term collocation to describe declarative data dependencies that live beside the component that uses the data. This means that you don't have to go digging around for action creator functions that actually get the component data that is scattered across several modules. With collocation, you 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.createFragmentContainer(User, { 
   user: () => graphql` 
    fragment on User { 
      first, 
      last, 
   } 
  `
}); 

You have two components here. First, there's the User component. This is the application component that actually renders the UI elements for the first and last name data. Note that this is just a plain old React component, rendering props that are passed to it. With the UserContainer component that you've created, Relay follows the container pattern that you learned about earlier in this book. It's in the createFragmentContainer() function that you specify the data dependencies that this component needs by passing a fragment of GraphQL syntax.

Once again, don't dwell on the Relay/GraphQL specifics just yet. The idea here is to simply illustrate that this is all the code that you need to write to get your component the data it needs. The rest is just bootstrapping the Relay query mechanism, which you'll see in the next chapter.