website/docs/guided-tour/rendering/environment.mdx
import DocsRating from '@site/src/core/DocsRating'; import {OssOnly, FbInternalOnly} from 'docusaurus-plugin-internaldocs-fb/internal'; // @fb-only // @fb-only
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.// @fb-only
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 (...);
}
// @fb-only
<DocsRating />