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

インストール

多くの場合、Relayをインストールする最も簡単な方法は、Tobias Tenglerが書いたcreate-relay-appパッケージを使用することです。名前が示唆しているのと異なり、このパッケージは既存のアプリにRelayをインストールします。

現在、Next、Vite、およびCreate React App上に構築されたアプリをサポートしています。これらのプラットフォームのいずれを使用していない場合、または何らかの理由で機能しない場合は、以下の手動手順に進みます。

実行するには、作業ディレクトリがクリーンであることを確認して、次のコマンドを実行します。

npm create @tobiastengler/relay-app

(または必要に応じてnpmの代わりにyarnまたはpnpmを使用します)。

完了すると、従うべき「次へ進む」が印刷されます。

このスクリプトの詳細については、GitHubリポジトリにあります。

手動インストール

yarnまたはnpmを使用してReactとRelayをインストールします

yarn add react react-dom react-relay

コンパイラを設定​

Relayの先行コンパイルにはRelayコンパイラが必要で、これはyarnまたはnpmからインストールできます

yarn add --dev relay-compiler

これによりbinスクリプトrelay-compilerがnode_modulesフォルダーにインストールされます。​package.jsonファイルにスクリプトを追加することにより、yarn/npmスクリプトから実行することをお勧めします

"scripts": {
  "relay": "relay-compiler"
}

コンパイラ設定​

設定ファイルを作成します

// relay.config.js
module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  src: "./src",
  language: "javascript", // "javascript" | "typescript" | "flow"
  schema: "./data/schema.graphql",
  excludes: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}

この設定はpackage.jsonファイルの「relay」セクションでも指定できます。詳細と構成オプションについては、次を参照してください:Relayコンパイラ設定

babel-plugin-relayの設定​

Relayには、GraphQLをランタイムアーティファクトに変換するためのBabelプラグインが必要です

yarn add --dev babel-plugin-relay graphql

.babelrcファイルのプラグインのリストに「relay」を追加します

{
  "plugins": [
    "relay"
  ]
}

graphqlテンプレートリテラルが正しく変換されるようにするには、「relay」プラグインが他のプラグインまたはプリセットより先に実行される必要があることに注意してください。バベルのこのトピックに関するドキュメントを参照してください。

その一方で、babel-plugin-relay を使用するかわりに、Relay を babel-plugin-macros とともに使用することもできます。babel-plugin-macros をインストールして Babel の構成に追加したら

const graphql = require('babel-plugin-relay/macro');

[コンパイラの実行]​

アプリケーションファイルの編集を行ったら、relay スクリプトを実行して新しいコンパイルしたアーティファクトを生成するだけです

yarn run relay

あるいは、--watch オプションを渡して、ソースコードのファイルの変更を監視し、コンパイルしたアーティファクトを自動的に再生成できます (注意: watchman がインストールされている必要があります)

yarn run relay --watch

[Relay コンパイラドキュメント](/docs/guides/compiler/) で詳細を確認してください。

[JavaScript 環境の要件]​

NPM で配布される Relay パッケージは ES5 バージョンの JavaScript を広くサポートしており、可能な限り多くのブラウザー環境をサポートしています。

ただし、Relay では (Map、Set、Promise、Object.assign) などの最新の JavaScript グローバル型が定義されている必要があります。まだネイティブでこれらを提供していない古いブラウザーやデバイスをサポートする場合は、バンドルされたアプリケーションに core-js や @babel/polyfill などのグローバルポリフィルを含めることを検討してください。

古いブラウザーをサポートする core-js を使用した Relay のポリフィルされた環境は次のようになります

require('core-js/es6/map');
require('core-js/es6/set');
require('core-js/es6/promise');
require('core-js/es6/object');

require('./myRelayApplication');
このページは役に立ちましたか?

このサイトをさらに有益なものにするために 数秒で答えられる質問に答えてください.