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

コンパイラかく語りき

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

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

 前回までで、JSの開発環境が整いました。

chuckwebtips.hatenablog.com

 

ビューライブラリにReact.jsを、サーバサイドにExpressを、そして開発環境のサポートにはWebpackを利用しています。

 

今回は、ReactのうえにRelayを載せていきます。

Relayとは最近話題のReduxのような、ある種のFluxの実装です。Reduxがそれ単体でアクション、ストア、リデューサーなど広範をカバーするのに対して、RelayはGraphQLに依存します。

 

ReactもRelayもGraphQLもFacebookが作ったものですね。

 

facebook.github.io

 

graphql.org

 

やや重たいので、2,3回に分けて書くかもしれません。

まずはスケルトン(最小構成)の生成からやっていきます。

 

ちなみに、スケルトン作成の参考にするのは、Relayチュートリアルで使ったスターターキットです。

facebook.github.io

 

github.com

 

パッケージインストール

スターターキットのpackage.jsonを参考にして、必要そうなパッケージを入れていきます。

github.com

 

$ npm i --save-dev babel-relay-plugin chokidar

$ npm i --save express-graphql graphql graphql-relay react-relay

 

 

devserver.js修正

ローカル開発サーバを立てるためのdevserver.jsを修正します。

gist.github.com

 

Webpackサーバは開発用に立て、ExpressサーバはGraphQL用に立てます。

特に難しいことはしていませんね。

 

 

ディレクトリ構造作成

devserver.jsが要求するディレクトリとファイルを作成します。

$ mkdir data

$ touhc data/database.js data/schema.js

 

npm scripts修正

最後に、package.jsonのnpm scriptsを修正します。

"dev" : "node devserver.js"

"start : "babel-node devserver.js"

に変更します。

 

これで、npm run devではなく、npm startでローカルサーバを立てることができます。

また、nodeではなくbabel-nodeでJSファイルを実行することで、モダンなJSでもそのまま実行できるようです。(たぶん、babelrcを読みに行ってる)

 

ちなみに、今の状態では、ディレクトリは以下のようになっています。

f:id:chuck0523:20160629000630p:plain

 

ちょっとここで区切ります。次回は、Relayをインテグレーションしていきます。