読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

JS開発環境の構築(5)Relayのインテグレーション

引き続き、JSでつくるアプリケーション。

前回までで、開発環境の構築と、GraphQLの導入が済みました。

 

chuckwebtips.hatenablog.com

  

chuckwebtips.hatenablog.com

 

今回は、ReactとGraphQLを上手いことつなぐための、Relayを導入していきます。今回は量が多いので長くなるかもしれません。

ちなみに、Relayチュートリアルとほぼ同じ内容になりますので、そちらも参照していただけると嬉しいです。

 

facebook.github.io

 

ありがたいことに日本語版がありました。

mae.chab.in

 

 

データ層

データ層、と呼んでいいのかわかりませんが、まずは仮想的にデータ定義を行います。

まず、アプリケーションのルートディレクトリに、dataディレクトリを作成します。作るファイルは2つです。

 

data/database.js

 

gist.github.com

 

クラスを用いて、テーブルのようなものを定義しています。

インスタンス化したあとに、カラムの値を埋めています。

今思えば、インスタンスプロパティとして、インスタンス化する時に渡しても良かったですね。

 

今回は、ユーザーと仕事のデータを作成しました。

 

もろもろ、定義したものをexportしています。

 

次に、data/schema.jsです。

gist.github.com

 

ここでは、型定義のようなことを行っています。ここで、仕事をユーザーに結びつけています。

 

以上でデータの定義はおしまいです。さくっと進めていますが、気になる箇所がありましたら、公式のチュートリアルをご参照ください。

 

スキーマ変換

次に、作成したスキーマJson形式に変換するスクリプトを作成します。

scriptディレクトリを作成して、その下に、updateSchema.jsをつくります。

 

gist.github.com

 

このファイルは、babel-node updateSchema.jsとして実行します。すると、dataディレクトリ以下に、schema.jsonとschema.graphqlが生成されます。

 

data/schema.graphql

gist.github.com

 

data/schema.json

gist.github.com

 

babelRelayPlugin

次に、babelRelayPluginを作成します。おまじないのようなものかもしれません。

buildディレクトリを作成して、その下に、bableRelayPlugin.jsを作ります。

 

gist.github.com

 

.babelrc追記

babelにもう少し仕事をしてもらうために、設定を追加します。

 

gist.github.com

 

メインは、pluginsの箇所ですね。

それ以外のpassPerPresetや、stage1~3はついでに入れてしまいました。

 

Route

Relayを使って開発していくには、ルートファイルが必要です。

src/routesディレクトリを作成して、その下にHomeRoute.jsを作りました。

gist.github.com

 

このようなファイルを作成して、ビューのルートで呼び出します。

src/client.js

 

gist.github.com

 

package.json

さて、ここまでで、package.jsonは以下のようになりました。

 

gist.github.com

 

metadataとして、自動生成したjsonを指定しました。

また、スキーマ生成のためのnpm scriptsを追記しました。

 

あとは、細かいbabel系のパッケージのインストールを行いました。

 

さて、ここまでで、ReactでRealyを通じてGraphQLを操作する準備が整いました。

 

コンポーネントからクエリ発行

やりたかったのは、これです。コンポーネントからクエリを発行するようにします。

 

gist.github.com

このような感じ。1つのコンポーネントでクエリ発行して、それをコンポーネント内でpropsからアクセスしています。

 

 

というわけで、今回は、Relayを組み込みました。

これで、コンポーネントからクエリを発行できるようになりました。

 

現在のディレクトリはこのような感じです。

f:id:chuck0523:20160701232815p:plain

 

ただし、現状では最小構成。シンプルなselect(のようなこと)しかしていないので、データの追加や、もう少し複雑なデータの定義なども行ってみたいです。

 

ひとまず区切りということで、Githubにあげたコードのリンクを貼ります。

github.com