Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxで マスターメンテナンスを作ろう! 〜Vol.1

Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxで マスターメンテナンスを作ろう! 〜Vol.1

Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxで マスターメンテナンスを作ろう! 〜Vol.1

Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxで マスターメンテナンスを作ろう! 〜Vol.1 へのコメントはまだありません

はじめに

GraphQL使ってみたいなぁ。調べたところ、GraphQLをサーバーサイドで実装しているのはRubyとnodejs。検索結果の量で比べるとnodejsの方が多い。とくにApollo を使った記事が多い。
ということで、サーバーサイドはApolloでGraphQLを実装し、フロントもApollo Clientで、と行きたいところなのですが、私が調べて実際使ってみたところ、Apollo Client+Reactは色々制約があって使いづらい。もう少し突っ込んで調べたところ、GraphQLサーバーに QueryとMutaionのリクエストを行える、graphql-requestという npmパッケージがあるのを見つけた。これを実際使ってみると、結構なレベルで思い通りにプログラミングできるようになったので、以下の組み合わせでGraphQLの練習として、商品マスターメンテナンスを組んでみたいと思う。

サーバーサイド Apollo Server + GraphQL + nodejs + sequelize
フロントエンド React + Redux + graphql-request

RESTと何かと比較され、RESTの次世代のGraphQLだと言われますが、実際にその正体を突き止められることを目指しています。私も、最初コーディングしてるときは、ちんぷんかんぷんでしたが、わかりだすとするすると理解が進みますし、GraphQLの良さも体感できます。
かなり長いですが、我慢してお付き合いください。

結構なボリュームなので、4回か5回に分けての連載になります。

・第1回 Apollo Serverが動くところまで(この記事)

・第2回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする

・第3回 フロントエンドをReact+Redux+graphql-requestを使って実装する

・第4回 フロントエンドからgraphql-requestを使って、データを取得・表示する

・第5回 graphql-requestを使って、データを登録・修正・削除する

まず、第一回はサーバーサイドのプロジェクトを作り、必要なnpm パッケージを導入し、
npm startで Apollo Serverが動くところまで。

ファイルの構成がわかりにくいと思うので、完成形のフォルダ構成を示しておきます。

Screenshot from 2019-05-13 18-59-59

サーバーサイドの準備

まずは開発フォルダを作成します。

npmを使って、必要なパッケージ群をインストール

Apollo Serverを起動させるために

サーバーサイドの中心となるファイル index.jsにApollo Serverを起動するための、あれこれを記述していきます。
以下、コンソールで、コマンドを記述してあるのは、基本、 プロジェクトルート/src ディレクトリをベースに記載します。

index.js (src/index.js)

いろんなファイルをインクルードしていきます。これらのファイルはApollo ServerでGraphQLを動かすのに、必須なファイル群です。最初は意味がわからなくても、あぁ、こんなファイルがいるんだなと、感覚的に覚えるようにしてください。

schema というのは、GraphQL APIの定義を書く場所です。
resolvers というのは、schema に記述したAPIの実装を書く場所です。
store というのは mysqlやpostgresql のデータストアの定義を書く場所です。
dataSources というのは、データベースの各テーブルに対するモデルをまとめるためのものです。

最後に server.listenで、nodejs サーバー(Apollo Server)を起動しています。

.env(.env)

環境設定ファイルに、データベースへの接続設定とシークレットキーを定義します。

このファイルはお決まりの魔法の言葉だ程度で覚えておいて、とりあえず、作ってください。

schema.js (src/schema.js)

では GraphQL APIの定義を書いていく schema.jsです。

とりあえず、Query と Mutationは 適当なものでごまかしておきます。(あとで修正します)

resolvers.js (src/resolvers.js)

では GraphQL APIの実装を書いていく resolvers.jsです。
とりあえず、空っぽの Query と Mutationを定義しておきましょう。

store.js (src/store.js)

データベースへの接続と、実際に使うテーブルのスキーマを記述します。

Apollo Server起動

package.jsonを使って npm start で、Apollo Server(nodejs)を動かせるようにします。
babel-node というのは ES2015形式で書いた新しい形式のソースを、古い形式に変換するためのものです。

では、Apollo Serverを起動してみましょう。

こんな感じに表示されたら、とりあえず、Apollo Serverが動いています。

Screenshot from 2019-05-12 20-58-10


About the author:

Related Posts

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top