Relay.RootContainer
Relay.RootContainer
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
.
Overview
Props
-
Component
Relay container that defines fragments and the view to render. -
route
Route that defines the query roots. -
forceFetch
Whether to send a server request regardless of data available on the client. -
renderLoading
Called to render when data requirements are being fulfilled. -
renderFetched
Called to render when data requirements are fulfilled. -
renderFailure
Called to render when data failed to be fulfilled. -
onReadyStateChange
Props
Component
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
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
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
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.
Example
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderLoading={function() { return <div>Loading...</div>; }} />
See also: Root Container > renderLoading
renderFetched
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.
Example
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderFetched={function(data) { return ( <ScrollView> <ProfilePicture {...data} /> </ScrollView> ); }} />
See also: Root Container > renderFetched
renderFailure
renderFailure(error: Error, retry: Function): ?ReactElement
When data requirements failed to be fulfilled, renderFailure
is called to render the view.
Example
<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
onReadyStateChange( readyState: { aborted: boolean; done: boolean; error: ?Error; events: Array<ReadyStateEvent>; ready: boolean; stale: boolean; } ): void
This callback prop is called as the various events of data resolution occurs.
See also: Ready State
© 2013–present Facebook Inc.
Licensed under the BSD License.
https://facebook.github.io/relay/docs/api-reference-relay-root-container.html