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

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

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

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

前回に続いて

さて、ここからが本番です。本来ならば Apollo Clientを使うべきなのかもしれませんが、
私の個人的な見解では Apollo Client は相当使いづらいです。
なので、 graphql-request というパッケージを使って、 GraphQLの QueryとMutaionを行います。
サーバーサイドは GraphQLのリクエストさえ飛んでくれば処理できるのでそれで問題なしです!

私はこのやり方が非常に気に入っています。

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

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

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

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

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

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

GraphQLアクセスの中心となるcontainerファイルを作成

GET_PRODUCTSで、データをN件取得します。
実際には onLoadData 関数内で GET_PRODUCTSクエリで、GraphQL リクエストを行い、データをN件取得します。
Reduxの containerについてよくわからない場合は、みっちり予習してください。

ページ表示時にデータをロードできるようにする

ページを構成する product.jsファイルを編集し、componentDidMountから、
containerの onInitメソッドを呼び出すようにします。

componentDidMount を追記します。

App.jsの調整

コンテナファイルを作成しましたが、作成しただけでは利用されないので、
product.jsの代わりに、cproduct.jsを利用するように書き換えます。

components/product.js ではなく、 コンテナ側の containers/cproduct.js を参照します。

データは読み込まれるか?

これで、serverを npm start し、front も npm start すると
データが読み込まれます。
実際に試してみて、chromeで、デバッグなど入れると、データを読み込めていることが解ると思います。

データ表示部分の作成

肝心の読み込んだデータを一覧表示するところがありませんので、それを記述していきます。

これで、図のように一覧表示できていたらOKです。

CSSを作成して、デザインをまともに

あとはSCSSで デザイン調整をしましょう。

App.jsを編集して、作成したscssを読み込む

ボタンを追加して、データを編集できるように

お疲れさまでした。とりあえず、今回はここまで。以下のような感じで、一覧データが表示できれば成功です。
次回は、一覧画面から、ボタンクリックで、別画面を表示し、データの編集ができるようにしましょう。

Screenshot from 2019-05-13 00-31-18


About the author:

Related Posts

Leave a comment

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

Back to Top