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> component 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 <RecoilRelayEnvironmentProvider> 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>
  )
}