Version: v1.6.1

Relay Environment

The Relay "Environment" bundles together the configuration, cache storage, and network-handling that Relay needs in order to operate.

Most applications will create a single Environment instance and use it throughout. In specific situations, however, you may want to create multiple environments for different purposes. For example, you may create a new environment instance whenever the user logs in or out in order to prevent data for different users being cached together. Similarly, a server rendered application may create a new environment instance per request, so that each request gets its own cache and user data does not overlap. Alternatively, you might have multiple products or features within a larger application, and you want each one to have product-specific network-handling or caching.

A simple example#

To create an environment instance in Relay Modern, use the RelayModernEnvironment class:

const {
Environment,
Network,
RecordSource,
Store,
} = require('relay-runtime');
const source = new RecordSource();
const store = new Store(source);
const network = Network.create(/*...*/); // see note below
const handlerProvider = null;
const environment = new Environment({
handlerProvider, // Can omit.
network,
store,
});

For more details on creating a Network, see the NetworkLayer guide.

Once you have an environment, you can pass it in to your QueryRenderer instance, or into mutations via the commitUpdate function (see "Mutations").

Adding a handlerProvider#

The example above did not configure a handlerProvider, which means that a default one will be provided. Relay Modern comes with a couple of built-in handlers that augment the core with special functionality for handling connections (which is not a standard GraphQL feature, but a set of pagination conventions used at Facebook, specified in detail in the Relay Cursor Connections Specification, and well-supported by Relay itself) and the viewer field (again, not a standard GraphQL schema feature, but one which has been conventionally used extensively within Facebook).

If you wish to provide your own handlerProvider, you can do so:

const {
ConnectionHandler,
ViewerHandler,
} = require('relay-runtime');
function handlerProvider(handle) {
switch (handle) {
// Augment (or remove from) this list:
case 'connection': return ConnectionHandler;
case 'viewer': return ViewerHandler;
}
throw new Error(
`handlerProvider: No handler provided for ${handle}`
);
}
Last updated on by Tianyu Yao