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

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
): ?RelayRenderCallback

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.
<RelayRenderer
  Container={ProfilePicture}
  route={profileRoute}
  render={({done, error, props, retry, stale}) => {
        if (error) {
            return <ErrorComponent />;
        } else if (props) {
          return <ProfilePicture {...props} />;
        } else {
          return <LoadingComponent />;
        }
        return undefined;
      }}
/>

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