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