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

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

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

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

前回に引き続き

前回までで、データ一覧を表示するところはできました。
今回は最終仕上げ、一覧から編集ボタンを押し、データの編集画面に移動し、データの修正・削除。
一覧から、新規データ作成ボタンを押し、データの新規作成。

細かく説明すると非常に時間がかかるので、ソースコードを貼り付けるのをメインにします。

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

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

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

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

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

・第5回 graphql-requestを使って、データを登録・修正・削除する(この記事)

ファイルツリー

今回も完成形のファイルツリーをまず示しておきます。
Screenshot from 2019-05-13 22-12-07

一覧画面の編集

変更箇所は「新規データ作成」ボタンを追加したところと、Reactが警告を出していたので、
明細業のデータに key を付与したところでしょうか。

一覧画面に対応するコンテナの編集

onClickEdit,onAddNew でページ遷移させるところが主な変更点。

データ編集画面

一覧画面から 編集ボタンを押すと飛んでくる データ編集画面を作ります。
この作業と、この画面に対応するコンテナさえ作れば、マスターメンテナンスは完成です。

細かい説明はしません、必死になってソースを追ってみてください。

データ編集画面に対応するコンテナを作成

先程作ったデータ編集画面のイベントハンドリングやプロパティなどを制御するコンテナを作成します。
ここで、ページ表示時に受け取ったパラメーターをもとに GraphQLで、データを取得し、表示。
データ編集がおわったら、ボタンクリックで、データの修正・削除・新規登録を行います。

細かい制御を突っ込みだすと、ツッコミどころはありますが、とりあえず、動くのでこれで良しとしましょう。

ソースの説明はしません。じっくり読んでみてください。

App.jsを編集し、詳細画面へジャンプできるようにする

CProductMain 関連を追記しています。

動作検証

こんな感じで、データの修正・削除、新規登録ができればOKです。
お疲れさまでした!!!!

Screenshot from 2019-05-13 21-47-47

■新規作成
Screenshot from 2019-05-13 21-50-05

Screenshot from 2019-05-13 21-47-59

Screenshot from 2019-05-13 21-50-17

■データ修正・削除

Screenshot from 2019-05-13 21-50-22

Screenshot from 2019-05-13 21-50-25


About the author:

Related Posts

Leave a comment

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

Back to Top