Relay.RootContainer is a React component that attempts to fulfill the data required in order to render an instance of Component
for a given route
.
Props
ComponentRelay container that defines fragments and the view to render.
routeRoute that defines the query roots.
forceFetchWhether to send a server request regardless of data available on the client.
renderLoadingCalled to render when data requirements are being fulfilled.
renderFetchedCalled to render when data requirements are fulfilled.
renderFailureCalled to render when data failed to be fulfilled.
onReadyStateChange
Component: RelayContainer
Must be a valid RelayContainer
. Relay will attempt to fulfill its data requirements before rendering it.
See also: Root Container > Component and Route
route: RelayRoute
Either an instance of Relay.Route
or an object with the name
, queries
, and optionally the params
properties.
See also: Root Container > Component and Route
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 to immediately fulfill the data requirements.
See also: Root Container > Force Fetching
renderLoading(): ?ReactElement
When data requirements have yet to be fulfilled, renderLoading
is called to render the view. If this returns undefined
, the previously rendered view (or nothing if there is no previous view) is rendered.
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderLoading={function() { return <div>Loading...</div>; }} />
See also: Root Container > renderLoading
renderFetched( data: {[propName: string]: $RelayData}, readyState: {stale: boolean} ): ?ReactElement
When all data requirements are fulfilled, renderFetched
is called to render the view. This callback is expected to spread data
into the supplied Container
when rendering it.
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderFetched={function(data) { return ( <ScrollView> <ProfilePicture {...data} /> </ScrollView> ); }} />
See also: Root Container > renderFetched
renderFailure(error: Error, retry: Function): ?ReactElement
When data requirements failed to be fulfilled, renderFailure
is called to render the view.
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderFailure={function(error, retry) { return ( <div> <p>{error.message}</p> <p><button onClick={retry}>Retry?</button></p> </div> ); }} />
See also: Root Container > renderFailure
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 occurs.
See also: Ready State