Relay Environment

The core of Relay's runtime is the Environment. The environment knows how to make requests to your GraphQL server and contains the Store, Relay's normalized data cache. Generally your application will construct a single environment which is configured to fetch data from your server, and then expose that environment to all of your components via RelayEnvironmentProvider.

Creating an Environment

To create your environment you must provide two key pieces, a Network and a Store.

The Network is responsible for making requests to your GraphQL server. The Store holds the normalized data cache.

A minimal implementation of an environment might look like this:

RelayEnvironment.js

import { Environment, Store, RecordSource, Network, FetchFunction } from "relay-runtime";

const HTTP_ENDPOINT = "https://graphql.org/graphql/";

const fetchGraphQL: FetchFunction = async (request, variables) => {
  const resp = await fetch(HTTP_ENDPOINT, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query: request.text, variables }),
  });
  if (!resp.ok) {
    throw new Error("Response failed.");
  }
  return await resp.json();
};

export const environment = new Environment({
  store: new Store(new RecordSource({})),
  network: Network.create(fetchGraphQL),
});

Advanced Configuration

The Relay environment accepts a number of additional configuration options when it is created. These options are all optional, but can be used to customize the behavior of the environment.

Notable options include:

• log - A function that will be called with telemetry events. See the types for LogEvent for a full list of events and their fields.
• missingFieldHandlers - A list of handlers that will be called when a field is missing from the store. This can be used to enable fulfilling queries to fields like Query.node from cache.
• getDataID - A function that will be called to generate a unique ID for a given object. This can be used to customize the way that Relay generates IDs for objects if your server does not implement the Global Object Identification spec.
• relayFieldLogger - A function that will be called when Relay encounters a field-level error.

For a full list of options, inspect the provided TypeScript types.