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

Methods

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('...');
}