Skip to main content

Relay Environment

To use GraphQL with the recoil-relay library you'll need to reference your Relay environment(s). Each GraphQL selector or effect requires an environment option which can either reference a Relay Environment directly or be an EnvironmentKey that matches up with a <RecoilRelayEnvironment> compnoent that registered a Relay environment.

EnvironmentKey

When using an EnvironmentKey with your GraphQL queries it is matched up with a surrounding <RecoilRelayEnvironment> with the same environmentKey within your <RecoilRoot>. This is useful in case the environment object is only available at runtime when actually rendering your component, such as for preloaded queries.

const myEnvironmentKey = new EnvironmentKey('My Environment');

function MyApp() {
const myEnvironment = useMyRelayEnvironment();
return (
<RecoilRoot>
<RecoilRelayEnvironment
environment={myEnvironment}
environmentKey={myEnvironmentKey}>
{/* Components here can use Recoil atoms/selectors which reference myEnvironmentKey */}
</RecoilRelayEnvironment>
</RecoilRoot>
)
}

Environment Provider

To use Relay hooks, such as for committing mutations, with your environment the <RelayEnvironmentProvider> component is still required. For your convenience there is a <RecoilRelayEnvrironmentProvider> component which combines both <RecoilRelayEnvironment> and <RelayEnvironmentProvider>.

const myEnvironmentKey = new EnvironmentKey('My Environment');

function MyApp() {
return (
<RecoilRoot>
<RecoilRelayEnvironmentProvider
environment={myEnvironment}
environmentKey={myEnvironmentKey}>
{/* Components here can use both Recoil and Relay APIs for GraphQL */}
</RecoilRelayEnvironmentProvider>
</RecoilRoot>
)
}