Relay.Renderer is a replacement for Relay.RootContainer
that composes a Relay.ReadyStateRenderer
and performs data fetching for a given queryConfig
.
Props
ContainerRelay container that defines fragments and the view to render.
forceFetchWhether to send a server request regardless of data available on the client.
queryConfig`QueryConfig` or `Relay.Route` that defines the query roots.
environmentAn instance of `Relay.Environment` or any object that implements the `RelayEnvironment` interface.
renderCalled to render when data requirements are being fulfilled.
onReadyStateChange
Container: RelayContainer
Must be a valid RelayContainer
. Relay will attempt to fulfill its data requirements before rendering it.
forceFetch: boolean
If supplied and set to true, a request for data will always be made to the server regardless of whether data on the client is available already.
queryConfig: RelayRoute
Either an instance of Relay.Route
or an object with the name
, queries
, and optionally the params
properties.
environment: RelayEnvironment
An object that conforms to the Relay.Environment
interface, such as Relay.Store
.
render( props: ?{[propName: string]: mixed}, done: boolean, error: ?Error, retry: ?Function, stale: boolean ): ?RelayRenderCallback
If the render callback is not supplied, the default behavior is to render the container if data is available, the existing view if one exists, or nothing.
If the callback returns undefined
, the previously rendered view (or nothing if there is no previous view) is rendered (e.g. when transitioning from one queryConfig
to another).
// In this example, `ErrorComponent` and `LoadingComponent` // simply display a static error message / loading indicator. <RelayRenderer Container={ProfilePicture} route={profileRoute} render={({done, error, props, retry, stale}) => { if (error) { return <ErrorComponent />; } else if (props) { return <ProfilePicture {...props} />; } else { return <LoadingComponent />; } return undefined; }} />
onReadyStateChange( readyState: { aborted: boolean; done: boolean; error: ?Error; ready: boolean; stale: boolean; } ): void
This callback prop is called as the various events of data resolution occur.
See also: Ready State