メインコンテンツへスキップ
バージョン: v18.0.0

Relayコンパイラー

graphql​

Relayによって提供されるgraphqlテンプレートタグは、GraphQL言語でクエリ、フラグメント、ミューテーション、サブスクリプションを記述するメカニズムとして機能します。例えば

import {graphql} from 'react-relay';

graphql`
  query MyQuery {
    viewer {
      id
    }
  }
`;

graphqlテンプレートタグを使用すると、GraphQLTaggedNodeというGraphQLドキュメントのランタイム表現が得られます。

graphqlテンプレートタグは、ランタイムで実行されることはありません。代わりに、Relayコンパイラーによって事前にコンパイルされ、ソースコードと一緒に存在する生成されたアーティファクトになり、Relayがランタイムで動作するために必要になります。

コンパイラー​

RelayはRelayコンパイラーを使用して、graphqlリテラルを、ソースファイルと共に存在する生成ファイルに変換します。

次のようなフラグメントがあるとします。

graphql`
  fragment MyComponent on Type {
    field
  }
`

これにより、./__generated__/MyComponent.graphql.jsに生成ファイルが表示され、ランタイムアーティファクト（Relayストアからの読み書きを支援）と、タイプセーフなコードを作成するのに役立つFlow型の両方が含まれます。

Relayコンパイラーは、ビルドステップの一部としてコードを生成し、ランタイムで参照できるようにします。クエリを事前にビルドすることで、Relayのランタイムはクエリ文字列を生成する必要がなくなり、ランタイムではコストが高すぎる可能性のあるクエリに対してさまざまな最適化を実行できます（たとえば、クエリで重複しているフィールドはビルドステップ中にマージして、GraphQLレスポンスの処理効率を向上させることができます）。

GraphQLスキーマ​

Relayコンパイラーを使用するには、GraphQLサーバーのAPIを記述する.graphql GraphQLスキーマファイルが必要です。通常、これらのファイルはサーバーの信頼できる情報源のローカル表現であり、直接編集されることはありません。たとえば、次のようなschema.graphqlがある場合があります。

schema {
  query: Root
}

type Root {
  dictionary: [Word]
}

type Word {
  id: String!
  definition: WordDefinition
}

type WordDefinition {
  text: String
  image: String
}

コンパイラーの実行​

さらに、GraphQLクエリとフラグメントを記述するためにgraphqlタグを使用する.jsファイルを含むディレクトリが必要です。これを./srcと呼びましょう。

次に、以前に設定したとおりにyarn run relayを実行します。

これにより、graphqlタグを含む対応するファイルと同じ場所に、一連の__generated__ディレクトリが作成されます。

たとえば、次の2つのファイルがあるとします。

  • src/Components/DictionaryComponent.js
const DictionaryWordFragment = graphql`
  fragment DictionaryComponent_word on Word {
    id
    definition {
      ...DictionaryComponent_definition
    }
  }
`

const DictionaryDefinitionFragment = graphql`
  fragment DictionaryComponent_definition on WordDefinition {
    text
    image
  }
`
  • src/Queries/DictionaryQuery.js
const DictionaryQuery = graphql`
  query DictionaryQuery {
    dictionary {
      ...DictionaryComponent_word
    }
  }
`

これにより、3つの生成ファイルと2つの__generated__ディレクトリが生成されます。

  • src/Components/__generated__/DictionaryComponent_word.graphql.js
  • src/Components/__generated__/DictionaryComponent_definition.graphql.js
  • src/Queries/__generated__/DictionaryQuery.graphql.js

生成された定義のインポート​

通常、生成された定義をインポートする必要はありません。Relay Babelプラグインは、コード内のgraphqlリテラルを、生成されたファイルに対するrequire()呼び出しに変換します。

ただし、Relayコンパイラーは、Flow型をタイプコメントとして自動的に生成します。たとえば、生成されたFlow型を次のようにインポートできます。

import type {DictionaryComponent_word} from './__generated__/DictionaryComponent_word.graphql';

まれに、複数のファイルからクエリ、ミューテーション、フラグメント、またはサブスクリプションにアクセスする必要がある場合があります。これらの場合は、直接インポートすることもできます。

import DictionaryComponent_word from './__generated__/DictionaryComponent_word.graphql';
このページは役に立ちましたか？

より良いサイトにするために 簡単な質問に答えてください.