Relay

Relay is the entry point to the Relay library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it.

Note

The react-relay npm module includes react as a peer dependency. Your app should specify React as a dependency explicitly.

The most-used function is createContainer() which wraps components with data declarations.

Overview

Properties

• static DefaultNetworkLayer →
• static Mutation →
• static QL →
• static PropTypes →
• static RootContainer →
• static Route →
• static Store →

Methods

• static createContainer(Component, ContainerConfig) Creates a Relay Container.
• static injectNetworkLayer(networkLayer) Customize how queries and mutations are sent to the server.
• static injectTaskScheduler(scheduler) Configure when Relay processing occurs.
• static isContainer(Component) Determine if a given object is a Relay.Container.

Properties

DefaultNetworkLayer (static property)

See the Network Layer Guide.

Mutation

See the Mutations Guide.

QL

See the Relay.QL API reference.

PropTypes

See the PropTypes API reference.

RootContainer

See the RootContainer Guide.

Route

See the Routes Guide.

Store

See the Store API reference.

Methods

createContainer (static method)

var Container = Relay.createContainer(Component, {
  initialVariables?: Object,
  prepareVariables?: (variables: Object, route: string) => Object,
  fragments: {[key: string]: Function}
});

Creates a new Relay Container - see the Container Guide for more details and examples.

injectNetworkLayer (static method)

Relay.injectNetworkLayer(networkLayer: {
  sendMutation: (mutation: RelayMutationRequest) => void;
  sendQueries: (queries: Array<RelayQueryRequest>) => void;
  supports: (...options: Array<string>): boolean;
});

Overrides the DefaultNetworkLayer.

Example

As an example, we can log each mutation that is sent to the server as follows:

var DefaultNetworkLayer = Relay.DefaultNetworkLayer;

class MutationLoggingNetworkLayer extends DefaultNetworkLayer {
  sendMutation(mutation) {
    // log the response or error (note that `mutation` is a promise)
    mutation.then(
      response => console.log(response),
      error => console.error(error),
    );
    // Send the mutation using the default network implementation
    return super.sendMutation(mutation);
  }
};

Relay.injectNetworkLayer(new MutationLoggingNetworkLayer());

injectTaskScheduler (static method)

Relay.injectTaskScheduler(scheduler: Scheduler): void;

type Scheduler = (task: Function) => void;

Relay wraps its core processing functions inside lightweight tasks, which by default are executed immediately (i.e. synchronously). In order to customize when these tasks are run - for example to avoid interrupting an animation during a touch gesture - applications can provide a custom scheduling function.

Examples

The default implementation is as follows:

Relay.injectTaskScheduler(task => task());

Notice that it immediately executes the next task. Relay manages the order of tasks to ensure a proper order of operations - the scheduler can't skip or reorder tasks, only decide when to execute the next one.

In React Native, we can schedule Relay processing so as to avoid interrupting touch gestures as follows:

var {InteractionManager} = require('react-native');

Relay.injectTaskScheduler(InteractionManager.runAfterInteractions);

You can read more about InteractionManager on the React Native API docs.

isContainer (static method)

Relay.isContainer(Component: Object): boolean;

Example

var Component = require('...');

if (Relay.isContainer(Component)) {
  Component.getFragment('...');
}