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.

route #

route: RelayRoute

Either an instance of Relay.Route or an object with the name, queries, and optionally the params properties.

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.

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>;
  }}
/>

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>
    );
  }}
/>

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>
    );
  }}
/>

onReadyStateChange #

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.