Back to Relay

Environment

website/docs/guided-tour/rendering/environment.mdx

20.1.11.1 KB
Original Source

import DocsRating from '@site/src/core/DocsRating'; import {OssOnly, FbInternalOnly} from 'docusaurus-plugin-internaldocs-fb/internal'; // @fb-only // @fb-only

Relay Environment Provider

In order to render Relay components, you need to render a RelayEnvironmentProvider component at the root of the app:

js
// App root

const {RelayEnvironmentProvider} = require('react-relay');
const Environment = require('MyEnvironment');

function Root() {
  return (
    <RelayEnvironmentProvider environment={Environment}>
    </RelayEnvironmentProvider>
  );
}
  • The RelayEnvironmentProvider takes an environment, which it will make available to all descendant Relay components, and which is necessary for Relay to function.

// @fb-only

Accessing the Relay Environment

If you want to access the current Relay Environment within a descendant of a RelayEnvironmentProvider component, you can use the useRelayEnvironment Hook:

js
const {useRelayEnvironment} = require('react-relay');

function UserComponent(props: Props) {
  const environment = useRelayEnvironment();

  return (...);
}

// @fb-only

<DocsRating />