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

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

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

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

前回に続いて

前回までの記事でApolloServer配下でGraphQLが動作し、GraphQL APIというか、GraphQL クエリ言語で、商品テーブルのデータ登録、読み込みができるようになったので、今回はフロントエンドをReact+Reduxで組み始めるところを説明します。Reactはそれほどでもないのですが、Reduxのことをわかっていないとナンノコッチャよく分からんということになると思いますので、各自Reduxの予習はみっちりしてください。

この記事は5回に分けて連載する、第3回の記事です。

・第1回 Apollo Serverが動くところまで

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

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

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

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

完成形のファイルツリー

説明が下手で、どこのファイルをいじっているのかわかりにくくなると思うので、完成形のファイルツリーを表示しておきます。

Screenshot from 2019-05-13 19-00-23

フロントエンドプロジェクトの作成

create-react-app を使って、プロジェクトを作ります。

npm を使って必要なモジュールインストール

Reduxに必要なフォルダ構成を作成

アプリケーションファイル App.jsを再定義

自動生成されたApp.jsを以下のように、ごっそり書き換えてください。
ルーティングにはreact-router-domを使い、
Home/About/Product(商品マスタ) の3画面構成にします。

App.jsに記述した諸々を定義

react-routerのヒストリーを管理するファイルです。

3画面共通のメニュー定義です。

ホーム画面

About画面

Product画面(商品マスターのメイン画面)

ここまでを動作確認

こんな感じに表示されれば、成功です。
Screenshot from 2019-05-12 23-43-06

Screenshot from 2019-05-12 23-43-11

Reduxのreducerを定義

ここからは reduxの基礎知識がある前提で書き進めます。
ツライと思いますが、写経してください。

Redux reducerで使った定数を定義

定数を定義します。

Reduxのアクションを定義

アクションを定義します。

index.jsのRedux対応

index.js を redux 対応させます。

つまらない作業でしたね。お疲れさまでした。
とりあえず、今回はここまでで、次回はいよいよ、graphql-requestを使って、Apollo ServerへGraphQL言語でアクセスして、データを取得したり、更新したりしてみましょう!


About the author:

Related Posts

Leave a comment

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

Back to Top