Edit on GitHub


Relay.Renderer is a replacement for Relay.RootContainer that composes a Relay.ReadyStateRenderer and performs data fetching for a given queryConfig.

Overview #


Props #

Container #

Container: RelayContainer

Must be a valid RelayContainer. Relay will attempt to fulfill its data requirements before rendering it.

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 already.

QueryConfig #

queryConfig: RelayRoute

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

Environment #

environment: RelayEnvironment

An object that conforms to the Relay.Environment interface, such as Relay.Store.

render #

  props: ?{[propName: string]: mixed},
  done: boolean,
  error: ?Error,
  retry: ?Function,
  stale: boolean
}): ?React$Element

If the render callback is not supplied, the default behavior is to render the container if data is available, the existing view if one exists, or nothing.

If the callback returns undefined, the previously rendered view (or nothing if there is no previous view) is rendered (e.g. when transitioning from one queryConfig to another).

Example #

// In this example, `ErrorComponent` and `LoadingComponent`
// simply display a static error message / loading indicator.
  render={({done, error, props, retry, stale}) => {
        if (error) {
          return <ErrorComponent />;
        } else if (props) {
          return <ProfilePicture {...props} />;
        } else {
          return <LoadingComponent />;

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 occur.

See also: Ready State