Edit on GitHub

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

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