website/versioned_docs/version-v15.0.0/guided-tour/rendering/environment.md
import DocsRating from '@site/src/core/DocsRating'; import {OssOnly, FbInternalOnly} from 'docusaurus-plugin-internaldocs-fb/internal';
In order to render Relay components, you need to render a RelayEnvironmentProvider component at the root of the app:
// App root
const {RelayEnvironmentProvider} = require('react-relay');
const Environment = require('MyEnvironment');
function Root() {
return (
<RelayEnvironmentProvider environment={Environment}>
</RelayEnvironmentProvider>
);
}
RelayEnvironmentProvider takes an environment, which it will make available to all descendant Relay components, and which is necessary for Relay to function.If you want to access the current Relay Environment within a descendant of a RelayEnvironmentProvider component, you can use the useRelayEnvironment Hook:
const {useRelayEnvironment} = require('react-relay');
function UserComponent(props: Props) {
const environment = useRelayEnvironment();
return (...);
}