Query Renderer When creating a new screen, you start with a QueryRenderer . A QueryRenderer is a React Component which is the root of a Relay component tree. It handles fetching your query, and uses the render prop to render the resulting data. As React components, QueryRenderers can be rendered anywhere that a React component can be rendered, i.e. not just at the top level but *within* other components or containers. For example, you could use a QueryRenderer to lazily fetch additional data for a popover.

import React from "react" import { createFragmentContainer , graphql , QueryRenderer } from "react-relay" import environment from "./lib/createRelayEnvironment" import ArtistHeader from "./ArtistHeader" // Below you can usually use one query renderer per page // and it represents the root of a query export default function ArtistRenderer ( { artistID } ) { return ( < QueryRenderer environment = { environment } query = { graphql ` query QueryRenderersArtistQuery ( $artistID : String ! ) { # The root field for the query artist ( id : $artistID ) { # A reference to your fragment container ... ArtistHeader_artist } } ` } variables = { { artistID } } render = { ( { error , props } ) => { if ( error ) { return < div > { error . message } </ div > ; } else if ( props ) { return < Artist artist = { props . artist } /> ; } return < div > Loading </ div > ; } } / > ) ; }

Fragment Container Step two is to render a tree of React components powered by Relay, which may include FragmentContainers , PaginationContainers , or RefetchContainers . The most common are FragmentContainers , which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*. Relay will then guarantee that the data declared by a FragmentContainer is available *before* rendering the component.