Relay 環境

recoil-relay ライブラリで GraphQL を使用するには、Relay 環境を参照する必要があります。各 GraphQL セレクター または エフェクト には environment オプションが必要です。このオプションは Relay 環境を直接参照することも、Relay 環境を登録した EnvironmentKey が一致する <RecoilRelayEnvironment> コンポーネントにすることもできます。

EnvironmentKey

GraphQL クエリで EnvironmentKey を使用する際、同じ environmentKey を持つ周囲の <RecoilRelayEnvironment> と <RecoilRoot> 内で一致します。これは、事前読み込み済みクエリ など、コンポーネントの実際のレンダリング時にのみ環境オブジェクトが使用可能な場合に役立ちます。

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

環境プロバイダ

Relay フックを使用するには、ミューテーションをコミットする場合など、環境に <RelayEnvironmentProvider> コンポーネントが引き続き必要です。利便性のために <RecoilRelayEnvironmentProvider> コンポーネントがあり、<RecoilRelayEnvironment> と <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>
  )
}