Relay 環境

若要將 GraphQL 與 recoil-relay 函式庫搭配使用，您需要參照 Relay 環境。各個 GraphQL 篩選器 或 效果 均需要 environment 選項，此選項可以參照 Relay 環境或 environmentKey，然後再與已註冊 Relay 環境的 <RecoilRelayEnvironment> 元件搭配使用。

EnvironmentKey

在 GraphQL 查詢中使用 EnvironmentKey 時，它會與 <RecoilRelayEnvironment> 搭配使用，兩者在您的 <RecoilRoot> 內具有相同的 environmentKey。這在環境物件僅在實際呈現元件時才在執行時期提供的情況下很有用，例如 預載入查詢。

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