Relay を使用した Recoil と GraphQL

recoil-relay NPM ライブラリは、GraphQL と Relay ライブラリを使用して、型安全かつ効率的なクエリを Recoil で実行できるようにします。これは、GraphQL で簡単にクエリを実行できるセレクターを提供します。これらのクエリは Recoil データフローグラフと同期されており、下流のセレクターはその状態を導き出すことができます。これらは上流の Recoil 状態に依存できます。また、Relay からのグラフ内の変更が自動的にサブスクライブされます。すべてのものが自動的に同期された状態になります。

例

Relay 環境を設定した後、GraphQL クエリを追加することは、GraphQL セレクターを定義するのと同じくらい簡単です。

const userNameQuery = graphQLSelector({
  key: 'UserName',
  environment: myEnvironment,
  query: graphql`
    query UserQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  variables: ({get}) => ({id: get(currentIDAtom)}),
  mapResponse: data => data.user?.name,
});

他の Recoil セレクターと同様に使用します。

function MyComponent() {
  const userName = useRecoilValue(userNameQuery);
  return <span>{userName}</span>;
}

インストール

Recoil インストールガイドを参照して Recoil をインストールしてください。Relay ライブラリ、GraphQL コンパイラ、Babel プラグイン、ESLint プラグインをインストールして設定するためのRelay ドキュメントとステップバイステップ ガイドを参照してください。次に、依存関係としてrecoil-relayを追加します。