QueryRenderer is the root of a Relay tree. It takes a query, fetches the data and calls the render callback with the data.

A QueryRenderer is a React component, so it can be rendered anywhere that a React component can be rendered, not just at the top level. A QueryRenderer can be rendered within other Relay components, for example to lazily fetch additional data for a popover. However, a QueryRenderer will not start loading its data until it is mounted, so nested QueryRenderer components can lead to avoidable request waterfalls if used unnecessarily.

const {
} = require('react-relay'); // or require('react-relay/compat') for compatibility

// Render this somewhere with React:
    query ExampleQuery($pageID: ID!) {
      page(id: $pageID) {
    pageID: '110798995619330',
  render={({error, props}) => {
    if (error) {
      return <div>{error.message}</div>;
    } else if (props) {
      return <div>{props.page.name} is great!</div>;
    return <div>Loading</div>;

Query Naming Convention #

To enable compatibility mode, relay-compiler enforces a simple naming convention for your queries. Queries must be named as <FileName><OperationType>, where "<OperationType>" is one of "Query", "Mutation", or "Subscription". The query above is named ExampleQuery so should be placed in Example.js.