QueryRenderer
QueryRenderer
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. It doesn't have to be on the top level. It can also be rendered within other Relay components (for example, to fetch the data lazily in a different roundtrip).
const { QueryRenderer, graphql, } = require('react-relay'); // or require('react-relay/compat') for compatibility // Render this somewhere with React: <QueryRenderer environment={environment} query={graphql` query ExampleQuery($pageID: ID!) { page(id: $pageID) { name } } `} variables={{ 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
.
© 2013–present Facebook Inc.
Licensed under the BSD License.
https://facebook.github.io/relay/docs/query-renderer.html