class Product extends React.Component {
componentDidMount() {
this.props.onInit();
}
render(){
let {list_body, has_more, onClickEdit, onAddNew} = this.props;

let lstBody = [];

for (let i = 0 ; i < list_body.length ; i++){ let bd = list_body[i]; lstBody.push(

{bd.id}

{bd.product_name}

{bd.price}

);
}

return (

This is Product

{lstBody}

)
}
}

export default withRouter(Product);
[/bash]

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

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

[bash]
$ nano containers/cproduct.js
[/bash]

[bash]
import {connect} from “react-redux”;
import {GraphQLClient} from “graphql-request”;

import Product from “../components/product”;
import {set_list_body, set_has_more} from “../actions/product”;

const GET_PRODUCTS = `
query GetProducts ($offset: Int!, $limit: Int!){
getProducts(offset: $offset, limit: $limit){
has_more
products {
id
product_name
price
}
}
}
`;

const HOST_ADDR = “http://localhost:4000”;
let LIST_OFFSET = 0;
let LIST_LIMIT = 100;

const mapStateToProps = (state) => {
return {
list_body: state.product.list_body,
has_more: state.product.has_more,
}
}

}
}

const onLoadData = (offset, list_body, dispatch) => {

const client = createClient();
let variables = {offset: offset , limit: LIST_LIMIT};

client.request(GET_PRODUCTS, variables).then(data => {
let newList = list_body;
for (let i=0; i < data.getProducts.products.length; i++){ newList = newList.concat(data.getProducts.products[i]); } dispatch(set_list_body(newList)); LIST_OFFSET += LIST_LIMIT; dispatch(set_has_more(data.getProducts.has_more)); }) } const createClient =() => {
const client = new GraphQLClient(HOST_ADDR + “/graphql”, {
headers: {
“x-token”: “test-test”,
},
});

return client;
}

const CProduct = connect(mapStateToProps, mapDispatchToProps)(Product)

export default CProduct

[/bash]

データ編集画面

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

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

[bash]
$ nano components/product_main.js
[/bash]

[bash]
import React from “react”;
import {withRouter} from “react-router-dom”;

class ProductMain extends React.Component {
componentDidMount(){
this.props.onInit(this.props.match.params.id);
}
render() {
let {mode, product_info,
onChangeId, onBlurId ,onChangeProductName,
onChangePrice, onRegister} = this.props;

if (product_info == null){
return

}

return (

onChangeId(product_info, ev.target.value)}
onBlur={(ev)=> onBlurId(product_info)}
/>

商品名

onChangeProductName(product_info, ev.target.value)}
/>

価格

onChangePrice(product_info, ev.target.value)}
/>

{(() => {
if (mode === “ADD”) {
return ;
}
else if (mode === “EDIT”) {
return (

);
}
})()}

)
}
}

export default withRouter(ProductMain);

[/bash]

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

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

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

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

[bash]
$ nano containers/cproduct_main.js
[/bash]

[bash]

import {connect} from “react-redux”;
import {GraphQLClient} from “graphql-request”;

import ProductMain from “../components/product_main”;
import {set_mode, set_product_info} from “../actions/product”;

const GET_PRODUCT = `
query GetProduct($id: Int!) {
getProduct(id: $id){
id
product_name
price
}
}
`;

const REGISTER_PRODUCT = `
mutation RegisterProduct ($mode: String!, $id: Int!, $product_name: String!, $price: Int!){
registerProduct(mode: $mode, id: $id, product_name: $product_name, price: $price){
id
product_name
price
}
}
`;

const HOST_ADDR = “http://localhost:4000”;

const mapStateToProps = (state) => {
return {
//login_info: state.login.login_info,
mode: state.product.mode,
product_info: state.product.product_info,
}
}

const mapDispatchToProps = (dispatch) => {
return {
onInit: (id) => {
let info = {id: “”, product_name: “”, price: “”};
dispatch(set_product_info(info));

if (id !== “none”){
onLoadData(id, dispatch)
}
else {
dispatch(set_mode(“ADD”));
}
},
onChangeId: (product_info, val) => {
product_info.id = val;
dispatch(set_product_info(product_info));
},
onChangeProductName: (product_info, val) => {
product_info.product_name = val;
dispatch(set_product_info(product_info));
},
onChangePrice: (product_info, val) => {
product_info.price = val;
dispatch(set_product_info(product_info));
},
onBlurId: (product_info) => {
onLoadData(product_info.id, dispatch);
},
onRegister: (mode, product_info, history) => {
const client = createClient();
if (product_info.id === “”){
product_info.id = “0”;
}
let variables = {mode: mode, id: parseInt(product_info.id),
product_name: product_info.product_name, price: parseInt(product_info.price)};

client.request(REGISTER_PRODUCT, variables).then(data => {
history.push(“/product”);
})
}
}
}

const onLoadData = (id, dispatch) => {
const client = createClient();
let variables = {id: parseInt(id)};

client.request(GET_PRODUCT, variables).then(data => {
dispatch(set_mode(“EDIT”));

let info = {};
info.id = String(data.getProduct.id);
info.product_name = data.getProduct.product_name;
info.price = String(data.getProduct.price);
dispatch(set_product_info(info));
})

}

const createClient =() => {
const client = new GraphQLClient(HOST_ADDR + “/graphql”, {
headers: {
“x-token”: “test-test”,
},
});

return client;
}

const CProductMain = connect(mapStateToProps, mapDispatchToProps)(ProductMain)

export default CProductMain

[/bash]

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

[bash]
$ nano ../App.js
[/bash]

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

[bash]
import React from ‘react’;
import {Router, Route} from “react-router-dom”;
import history from ‘./history’;

import Home from “./components/home”;
import About from “./components/about”;
import CProduct from “./containers/cproduct”;
import CProductMain from “./containers/cproduct_main”;

import “./sass/main.scss”;

function App() {
return (

GraphQL と Apollo Serverを使ったマスターメンテナンス

);
}

export default App;

[/bash]

動作検証

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

■新規作成

■データ修正・削除

About the author:

hiro

Tags: Apollo GraphQL react

Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxでマスターメンテナンスを作ろう! 〜Vol.4
2019年5月13日
前回に続いてさて、ここからが本番です。本来ならば Apollo Clientを使うべきなのかもしれませんが、私の個人的な見解では Apollo Client は相当使いづらいです。なので、 graphql-request というパッケージを使って、 GraphQLの QueryとMutaionを行います。サーバーサイドは GraphQLのリクエストさえ飛んでくれば処理できるのでそれで問題なしです！私はこのやり方が非常に気に入っています。この記事は５回に分けて連載する、第４回の記事です。・第１回 Apollo Serverが動くところまで・第２回 Apollo Server配下で…
Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxでマスターメンテナンスを作ろう! 〜Vol.3
2019年5月13日
前回に続いて前回までの記事でApolloServer配下でGraphQLが動作し、GraphQL APIというか、GraphQL クエリ言語で、商品テーブルのデータ登録、読み込みができるようになったので、今回はフロントエンドをReact+Reduxで組み始めるところを説明します。Reactはそれほどでもないのですが、Reduxのことをわかっていないとナンノコッチャよく分からんということになると思いますので、各自Reduxの予習はみっちりしてください。この記事は５回に分けて連載する、第３回の記事です。・第１回 Apollo Serverが動くところまで・第２回 Apollo Server…
Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxでマスターメンテナンスを作ろう! 〜Vol.2
2019年5月13日
前回に続いてとりあえず、GraphQLを利用できる Apollo Serverが起動できたので、 GraphQLを使って、商品テーブル(products)にアクセスできるようにしてみましょう。この記事は５回に分けて連載する、第２回の記事です。・第１回 Apollo Serverが動くところまで・第２回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする（この記事）・第３回フロントエンドをReact＋Redux＋graphql-requestを使って実装する・第４回フロントエンドからgraphql-requestを使って、データを取得・表示する・…
Apollo Server、GraphQL、nodejs、sequesize、フロントにReact+Reduxでマスターメンテナンスを作ろう! 〜Vol.1
2019年5月13日
はじめに GraphQL使ってみたいなぁ。調べたところ、GraphQLをサーバーサイドで実装しているのはRubyとnodejs。検索結果の量で比べるとnodejsの方が多い。とくにApollo を使った記事が多い。ということで、サーバーサイドはApolloでGraphQLを実装し、フロントもApollo Clientで、と行きたいところなのですが、私が調べて実際使ってみたところ、Apollo Client＋Reactは色々制約があって使いづらい。もう少し突っ込んで調べたところ、GraphQLサーバーに QueryとMutaionのリクエストを行える、graphql-requestという np…
create-react-app で作った環境で、production/staging/xxxなどを process.envを使って切り替える
2019年5月7日
create-react-appした環境では、start/build/test の環境はできて、ビルドするときに必要な環境変数が process.env.NODE_ENV にセットされますが・・・ production環境のとき、stagingのとき　と切り替えたいときに、 process.env.NODE_ENVではうまく行きません。 create-react-appした環境では、「REACT_APP_xxxxxxx」という環境変数を使うことができます！なので、環境変数に REACT_APP_CURR_ENV という変数を用意します。で、環境毎に違う設定などは、ごく僅かだと思うので…
Laravel と Reactで Laravel Mixを使いapp.cssとapp.jsのバージョン管理を有効にする
2019年1月3日
LaravelとReactを使って、サービスを作ったはいいが、いざリリースして、フロント周りの調整をかけても、なかなかクライアントサイドで変更が有効にされないケースが多かった。これは当たり前の話で、Laravel内からコンパイル済みのapp.cssとapp.jsをくださいとロジックを書いているからである。これ、バージョンを上げるごとに手動で、ファイル名を変更したり、パラメーターを追加して、強制的に再読込させる方法もないではないが、スマートではない。そこでどうするか。プロジェクトのルートにある Laravel Mixのファイルに以下を追記（末尾3行） webpack.mix.jsを編集…
Webpack4 で React環境を整える(sassも)
2018年3月25日
Webpack3で、開発するのに慣れていたんだが、知らぬ間にVer4のwebpackが出ている。 webpack4からは、コンフィグレスを目指しているみたいだけど、コンフィグも多少いるし、Ver3とは書き方がずいぶん替わっているので、軽くまとめておく。開発フォルダ作成 [bash] cd ~/ mkdir workspace mkdir wp4react cd workspace/wp4react npm init -y mkdir dist src mkdir src/components [/bash] 開発用パッケージの導入 [bash] npm i -D babel-core bab…
Linux Mint（Ubuntu）でイマドキの開発しよう！ 2017年夏版
2017年7月29日
フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように動きがトロい。コンソールでコマンドライン叩くのがほ…

< >