バージョン: v18.0.0

チュートリアル入門

このチュートリアルでは、Relayの最も重要で頻繁に使用される機能について説明します。そのため、ニュースフィードを表示するシンプルなアプリを構築します。以下の内容を網羅します。

クエリを使用してデータを取得する方法。
クエリをフラグメントに分割することで、コンポーネントを自己完結型にする方法。
コネクションを使用してデータをページネーションする方法。
ミューテーションとアップデータを使用してサーバー上のデータを更新する方法。

このチュートリアルでは、Reactにある程度精通していることを前提としています。React初心者の方は、Reactチュートリアルを参照し、コンポーネントの作成、propsの受け渡し、useStateなどの基本的なフックの使用に慣れるまでReactで作業することをお勧めします。チュートリアルはWebベースですが、RelayはReact Nativeでも問題なく動作します。

このチュートリアルはTypeScriptで作成されているため、TypeScriptの基本的な知識も役立ちます。型の宣言とインポート、関数の注釈以上の知識は必要ありません。Relayは、Flow型システムを使用したり、型システムを使用せずに使用することもできます。

情報

重要: チュートリアルは順番に学習することを目的としており、演習は互いに積み重ねられています。サンプルアプリに段階的に変更を加えていくため、前のセクションを完了していないと、後のセクションは理解できません。

開始するには、次のコマンドを実行します

git clone https://github.com/relayjs/relay-examples.git
cd relay-examples/newsfeed
npm install
npm run dev

これは、開始するためのテンプレートプロジェクトをダウンロードし、サーバーを起動します。(うまくいかない場合は、gitのインストールまたはnpmのインストールが必要になる場合があります。)

npm run devを実行すると、いくつかのプロセスが開始されます

フロントエンドコードを提供するWebpackベースのHTTPサーバー。
フロントエンドが情報を取得するためにクエリを実行する、基本的なGraphQLサーバー。
Relayコンパイラ。アプリ内のGraphQLを処理し、Relayが実行時に使用する追加ファイルと、クエリの入力と結果を表すTypeScript型を生成します。ファイルに変更を保存すると自動的に再生成されます。

端末出力では、これら3つのプロセスのログ出力がタグでマークされています。黄色の[webpack]、緑色の[server]、青色の[relay]です。[relay]でマークされたエラーに注意してください。GraphQLに誤りがある場合に役立ちます。

[relay]プロセスで`[relay] thread 'main' panicked at 'Cannot run relay in watch mode if `watchman` is not available (or explicitly disabled).'`` というエラーが発生した場合、watchmanがシステムにインストールされていないか、利用できないことを意味します。これを解決するには、watchmanを別にインストールする必要がある場合があります。watchmanをインストールした後、もう一度npm run devを実行してみてください。

これらのプロセスが実行されたので、ブラウザでhttp://localhost:3000を開くことができます。

Reactでレンダリングされた単一のニュースフィードストーリーを表示するWebページから始めますが、そのストーリーのデータはReactコンポーネントにハードコードされたプレースホルダーデータです。このチュートリアルの残りの部分では、サーバーからデータを取得し、複数のストーリーをページネーションし、コメントやいいね！でデータを更新することで、アプリを機能させます。

サンプルアプリを構成するファイルは、次のように配置されています

src/components — 変更および操作するフロントエンドアプリコンポーネント。重要なコンポーネントの一部は次のとおりです
- App.tsx — トップレベルコンポーネント
- Newsfeed.tsx — クエリを実行してニュースフィードストーリーを取得し、ストーリーのスクロールリストを表示するコンポーネント。チュートリアルの冒頭では、このコンポーネントはハードコードされたプレースホルダーデータを使用します。GraphQLとRelayを介してデータを取得するように変更します。
- Story.tsx — 単一のニュースフィードストーリーを表示するコンポーネント。
server — サンプルデータを提供する非常に基本的なGraphQLサーバー
- server/schema.graphql — GraphQLスキーマ: GraphQLを介してサーバーからどのような情報をクエリできるかを指定します。

最後に、VSCodeを使用する場合は、オートコンプリート、エラー、その他のヘルプを得るためにRelay VSCode拡張機能をインストールすることをお勧めします。

次のセクションに進んで、GraphQLとRelayについて学習を始めましょう。