Relay.Renderer

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

Overview

Props

• Container Relay container that defines fragments and the view to render.
• forceFetch Whether to send a server request regardless of data available on the client.
• queryConfig `QueryConfig` or `Relay.Route` that defines the query roots.
• environment An instance of `Relay.Environment` or any object that implements the `RelayEnvironment` interface.
• render Called to render when data requirements are being fulfilled.
• onReadyStateChange

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

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.
<Relay.Renderer
  Container={ProfilePicture}
  queryConfig={profileRoute}
  environment={Relay.Store}
  render={({done, error, props, retry, stale}) => {
        if (error) {
          return <ErrorComponent />;
        } else if (props) {
          return <ProfilePicture {...props} />;
        } else {
          return <LoadingComponent />;
        }
      }}
/>

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

See also: Ready State