{"id":1920,"date":"2019-05-13T22:15:45","date_gmt":"2019-05-13T13:15:45","guid":{"rendered":"https:\/\/lovelinux.mydns.jp\/?p=1920"},"modified":"2019-05-13T22:16:04","modified_gmt":"2019-05-13T13:16:04","slug":"apollo-server%e3%80%81graphql%e3%80%81nodejs%e3%80%81sequesize%e3%80%81%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%81%abreactredux%e3%81%a7-%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%b3-5","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1920","title":{"rendered":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5"},"content":{"rendered":"<h3>\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d<\/h3>\n<p>\u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002<br \/>\n\u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002<br \/>\n\u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002<\/p>\n<p>\u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n<p><font size=\"+1\"><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1867\">\u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067<\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1896\">\u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b<\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1905\">\u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b<\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1909\">\u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b<\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/?p=1920\">\u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09<\/a><\/p>\n<p><\/font><\/p>\n<h3>\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc<\/h3>\n<p>\u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07-1024x890.png\" alt=\"Screenshot from 2019-05-13 22-12-07\" width=\"806\" height=\"701\" class=\"alignnone size-large wp-image-1923\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07-1024x890.png 1024w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07-300x261.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07-768x667.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-22-12-07.png 1167w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<h3>\u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6<\/h3>\n<p>\u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001<br \/>\n\u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>[bash]<br \/>\n$ nano components\/product.js<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\nimport React from &#8220;react&#8221;;<br \/>\nimport {withRouter} from &#8220;react-router-dom&#8221;;<br \/>\nimport Menu from &#8220;.\/menu&#8221;;<\/p>\n<p>class Product extends React.Component {<br \/>\n  componentDidMount() {<br \/>\n    this.props.onInit();<br \/>\n  }<br \/>\n  render(){<br \/>\n    let {list_body, has_more, onClickEdit, onAddNew} = this.props;<\/p>\n<p>    let lstBody = [];<\/p>\n<p>    for (let i = 0 ; i < list_body.length ; i++){\n      let bd = list_body[i];\n      lstBody.push(\n        \n\n<div key={bd.id}>\n<div className=\"product_id\">{bd.id}<\/div>\n<div className=\"product_name\">{bd.product_name}<\/div>\n<div className=\"price\">{bd.price}<\/div>\n<div className=\"edit\"><button onClick={()=> onClickEdit(bd.id, this.props.history)}>\u7de8\u96c6<\/button> <\/div>\n<div className=\"clearfix\" \/>\n        <\/div>\n<p>      );<br \/>\n    }<\/p>\n<p>    return (<\/p>\n<div>\n        <Menu \/><\/p>\n<h3>This is Product<\/h3>\n<p>        <button onClick={()=> onAddNew(this.props.history)}>\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210<\/button><\/p>\n<div className=\"list_products\">\n          {lstBody}\n        <\/div>\n<\/p><\/div>\n<p>    )<br \/>\n  }<br \/>\n}<\/p>\n<p>export default withRouter(Product);<br \/>\n[\/bash]<\/p>\n<h3>\u4e00\u89a7\u753b\u9762\u306b\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u306e\u7de8\u96c6<\/h3>\n<p>onClickEdit,onAddNew \u3067\u30da\u30fc\u30b8\u9077\u79fb\u3055\u305b\u308b\u3068\u3053\u308d\u304c\u4e3b\u306a\u5909\u66f4\u70b9\u3002<\/p>\n<p>[bash]<br \/>\n$ nano containers\/cproduct.js<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\nimport {connect} from &#8220;react-redux&#8221;;<br \/>\nimport {GraphQLClient} from &#8220;graphql-request&#8221;;<\/p>\n<p>import Product from &#8220;..\/components\/product&#8221;;<br \/>\nimport {set_list_body, set_has_more} from &#8220;..\/actions\/product&#8221;;<\/p>\n<p>const GET_PRODUCTS = `<br \/>\n  query GetProducts ($offset: Int!, $limit: Int!){<br \/>\n    getProducts(offset: $offset, limit: $limit){<br \/>\n      has_more<br \/>\n      products {<br \/>\n        id<br \/>\n        product_name<br \/>\n        price<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n`;<\/p>\n<p>const HOST_ADDR = &#8220;http:\/\/localhost:4000&#8221;;<br \/>\nlet LIST_OFFSET = 0;<br \/>\nlet LIST_LIMIT = 100;<\/p>\n<p>const mapStateToProps = (state) => {<br \/>\n  return {<br \/>\n    list_body: state.product.list_body,<br \/>\n    has_more: state.product.has_more,<br \/>\n  }<br \/>\n}<\/p>\n<p>const mapDispatchToProps = (dispatch) => {<br \/>\n  return {<br \/>\n    onInit: () => {<br \/>\n      LIST_OFFSET = 0;<br \/>\n      onLoadData(LIST_OFFSET, [], dispatch)<br \/>\n    },<br \/>\n    onClickEdit: (id, history) => {<br \/>\n      history.push(&#8220;\/product\/edit\/&#8221; + id);<br \/>\n    },<br \/>\n    onAddNew: (history) => {<br \/>\n      history.push(&#8220;\/product\/add\/none&#8221;);<br \/>\n    },<br \/>\n    onLoadMore: (list_body) => {<br \/>\n      onLoadData(LIST_OFFSET, list_body, dispatch);<br \/>\n    },<\/p>\n<p>  }<br \/>\n}<\/p>\n<p>const onLoadData = (offset, list_body, dispatch) => {<\/p>\n<p>  const client = createClient();<br \/>\n  let variables = {offset: offset , limit: LIST_LIMIT};<\/p>\n<p>  client.request(GET_PRODUCTS, variables).then(data => {<br \/>\n    let newList = list_body;<br \/>\n    for (let i=0; i < data.getProducts.products.length; i++){\n      newList = newList.concat(data.getProducts.products[i]);\n    }\n\n    dispatch(set_list_body(newList));\n\n    LIST_OFFSET += LIST_LIMIT;\n    dispatch(set_has_more(data.getProducts.has_more));\n\n  })\n\n}\n\n\nconst createClient =() => {<br \/>\n  const client = new GraphQLClient(HOST_ADDR + &#8220;\/graphql&#8221;, {<br \/>\n    headers: {<br \/>\n      &#8220;x-token&#8221;: &#8220;test-test&#8221;,<br \/>\n    },<br \/>\n  });<\/p>\n<p>  return client;<br \/>\n}<\/p>\n<p>const CProduct = connect(mapStateToProps, mapDispatchToProps)(Product)<\/p>\n<p>export default CProduct<\/p>\n<p>[\/bash]<\/p>\n<h3>\u30c7\u30fc\u30bf\u7de8\u96c6\u753b\u9762<\/h3>\n<p>\u4e00\u89a7\u753b\u9762\u304b\u3089 \u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u98db\u3093\u3067\u304f\u308b \u30c7\u30fc\u30bf\u7de8\u96c6\u753b\u9762\u3092\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\u3053\u306e\u4f5c\u696d\u3068\u3001\u3053\u306e\u753b\u9762\u306b\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u3055\u3048\u4f5c\u308c\u3070\u3001\u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u306f\u5b8c\u6210\u3067\u3059\u3002<\/p>\n<p>\u7d30\u304b\u3044\u8aac\u660e\u306f\u3057\u307e\u305b\u3093\u3001\u5fc5\u6b7b\u306b\u306a\u3063\u3066\u30bd\u30fc\u30b9\u3092\u8ffd\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>[bash]<br \/>\n$ nano components\/product_main.js<br \/>\n[\/bash]<\/p>\n<p>[bash]<br \/>\nimport React from &#8220;react&#8221;;<br \/>\nimport {withRouter} from &#8220;react-router-dom&#8221;;<\/p>\n<p>class ProductMain extends React.Component {<br \/>\n  componentDidMount(){<br \/>\n    this.props.onInit(this.props.match.params.id);<br \/>\n  }<br \/>\n  render() {<br \/>\n    let {mode, product_info,<br \/>\n          onChangeId, onBlurId ,onChangeProductName,<br \/>\n          onChangePrice, onRegister} = this.props;<\/p>\n<p>    if (product_info == null){<br \/>\n      return <\/p>\n<div \/>\n    }<\/p>\n<p>    return (<br \/>\n      <main className=\"product_main\"><\/p>\n<div>ID<\/div>\n<div>\n          <input \n            value={product_info.id} \n            onChange={(ev)=> onChangeId(product_info, ev.target.value)}<br \/>\n            onBlur={(ev)=> onBlurId(product_info)}<br \/>\n           \/>\n        <\/div>\n<div>\u5546\u54c1\u540d<\/div>\n<div>\n          <input \n            value={product_info.product_name} \n            onChange={(ev)=> onChangeProductName(product_info, ev.target.value)}<br \/>\n           \/>\n        <\/div>\n<div>\u4fa1\u683c<\/div>\n<div>\n          <input \n            value={product_info.price} \n            onChange={(ev)=> onChangePrice(product_info, ev.target.value)}<br \/>\n           \/>\n        <\/div>\n<div>\n          {(() => {<br \/>\n              if (mode === &#8220;ADD&#8221;) {<br \/>\n                return <button onClick={()=> onRegister(mode, product_info, this.props.history)}>\u30c7\u30fc\u30bf\u767b\u9332<\/button>;<br \/>\n              }<br \/>\n              else if (mode === &#8220;EDIT&#8221;) {<br \/>\n                  return (<\/p>\n<div>\n                      <button onClick={()=> onRegister(mode, product_info, this.props.history)}>\u30c7\u30fc\u30bf\u4fee\u6b63<\/button><br \/>\n                      <button onClick={()=> onRegister(&#8220;DELETE&#8221;, product_info, this.props.history)}>\u30c7\u30fc\u30bf\u524a\u9664<\/button>\n                    <\/div>\n<p>                  );<br \/>\n              }<br \/>\n          })()}<\/p><\/div>\n<p>      <\/main><br \/>\n    )<br \/>\n  }<br \/>\n}<\/p>\n<p>export default withRouter(ProductMain);<\/p>\n<p>[\/bash]<\/p>\n<h3>\u30c7\u30fc\u30bf\u7de8\u96c6\u753b\u9762\u306b\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u6210<\/h3>\n<p>\u5148\u7a0b\u4f5c\u3063\u305f\u30c7\u30fc\u30bf\u7de8\u96c6\u753b\u9762\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3084\u30d7\u30ed\u30d1\u30c6\u30a3\u306a\u3069\u3092\u5236\u5fa1\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\n\u3053\u3053\u3067\u3001\u30da\u30fc\u30b8\u8868\u793a\u6642\u306b\u53d7\u3051\u53d6\u3063\u305f\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u3082\u3068\u306b GraphQL\u3067\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u8868\u793a\u3002<br \/>\n\u30c7\u30fc\u30bf\u7de8\u96c6\u304c\u304a\u308f\u3063\u305f\u3089\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u30fb\u65b0\u898f\u767b\u9332\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>\u7d30\u304b\u3044\u5236\u5fa1\u3092\u7a81\u3063\u8fbc\u307f\u3060\u3059\u3068\u3001\u30c4\u30c3\u30b3\u30df\u3069\u3053\u308d\u306f\u3042\u308a\u307e\u3059\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u3001\u52d5\u304f\u306e\u3067\u3053\u308c\u3067\u826f\u3057\u3068\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u30bd\u30fc\u30b9\u306e\u8aac\u660e\u306f\u3057\u307e\u305b\u3093\u3002\u3058\u3063\u304f\u308a\u8aad\u3093\u3067\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>[bash]<br \/>\n$ nano containers\/cproduct_main.js<br \/>\n[\/bash]<\/p>\n<p>[bash]<\/p>\n<p>import {connect} from &#8220;react-redux&#8221;;<br \/>\nimport {GraphQLClient} from &#8220;graphql-request&#8221;;<\/p>\n<p>import ProductMain from &#8220;..\/components\/product_main&#8221;;<br \/>\nimport {set_mode, set_product_info} from &#8220;..\/actions\/product&#8221;;<\/p>\n<p>const GET_PRODUCT = `<br \/>\n  query GetProduct($id: Int!) {<br \/>\n    getProduct(id: $id){<br \/>\n      id<br \/>\n      product_name<br \/>\n      price<br \/>\n    }<br \/>\n  }<br \/>\n`;<\/p>\n<p>const REGISTER_PRODUCT = `<br \/>\n  mutation RegisterProduct ($mode: String!, $id: Int!, $product_name: String!, $price: Int!){<br \/>\n    registerProduct(mode: $mode, id: $id, product_name: $product_name, price: $price){<br \/>\n      id<br \/>\n      product_name<br \/>\n      price<br \/>\n    }<br \/>\n  }<br \/>\n`;<\/p>\n<p>const HOST_ADDR = &#8220;http:\/\/localhost:4000&#8221;;<\/p>\n<p>const mapStateToProps = (state) => {<br \/>\n  return {<br \/>\n    \/\/login_info: state.login.login_info,<br \/>\n    mode: state.product.mode,<br \/>\n    product_info: state.product.product_info,<br \/>\n  }<br \/>\n}<\/p>\n<p>const mapDispatchToProps = (dispatch) => {<br \/>\n  return {<br \/>\n    onInit: (id) => {<br \/>\n      let info = {id: &#8220;&#8221;, product_name: &#8220;&#8221;, price: &#8220;&#8221;};<br \/>\n      dispatch(set_product_info(info));<\/p>\n<p>      if (id !== &#8220;none&#8221;){<br \/>\n        onLoadData(id, dispatch)<br \/>\n      }<br \/>\n      else {<br \/>\n        dispatch(set_mode(&#8220;ADD&#8221;));<br \/>\n      }<br \/>\n    },<br \/>\n    onChangeId: (product_info, val) => {<br \/>\n      product_info.id = val;<br \/>\n      dispatch(set_product_info(product_info));<br \/>\n    },<br \/>\n    onChangeProductName: (product_info, val) => {<br \/>\n      product_info.product_name = val;<br \/>\n      dispatch(set_product_info(product_info));<br \/>\n    },<br \/>\n    onChangePrice: (product_info, val) => {<br \/>\n      product_info.price = val;<br \/>\n      dispatch(set_product_info(product_info));<br \/>\n    },<br \/>\n    onBlurId: (product_info) => {<br \/>\n      onLoadData(product_info.id, dispatch);<br \/>\n    },<br \/>\n    onRegister: (mode, product_info, history) => {<br \/>\n      const client = createClient();<br \/>\n      if (product_info.id === &#8220;&#8221;){<br \/>\n        product_info.id = &#8220;0&#8221;;<br \/>\n      }<br \/>\n      let variables = {mode: mode, id: parseInt(product_info.id),<br \/>\n                        product_name: product_info.product_name, price: parseInt(product_info.price)};<\/p>\n<p>      client.request(REGISTER_PRODUCT, variables).then(data => {<br \/>\n        history.push(&#8220;\/product&#8221;);<br \/>\n      })<br \/>\n    }<br \/>\n  }<br \/>\n}<\/p>\n<p>const onLoadData = (id, dispatch) => {<br \/>\n  const client = createClient();<br \/>\n  let variables = {id: parseInt(id)};<\/p>\n<p>  client.request(GET_PRODUCT, variables).then(data => {<br \/>\n    dispatch(set_mode(&#8220;EDIT&#8221;));<\/p>\n<p>    let info = {};<br \/>\n    info.id = String(data.getProduct.id);<br \/>\n    info.product_name = data.getProduct.product_name;<br \/>\n    info.price = String(data.getProduct.price);<br \/>\n    dispatch(set_product_info(info));<br \/>\n  })<\/p>\n<p>}<\/p>\n<p>const createClient =() => {<br \/>\n  const client = new GraphQLClient(HOST_ADDR + &#8220;\/graphql&#8221;, {<br \/>\n    headers: {<br \/>\n      &#8220;x-token&#8221;: &#8220;test-test&#8221;,<br \/>\n    },<br \/>\n  });<\/p>\n<p>  return client;<br \/>\n}<\/p>\n<p>const CProductMain = connect(mapStateToProps, mapDispatchToProps)(ProductMain)<\/p>\n<p>export default CProductMain<\/p>\n<p>[\/bash]<\/p>\n<h3>App.js\u3092\u7de8\u96c6\u3057\u3001\u8a73\u7d30\u753b\u9762\u3078\u30b8\u30e3\u30f3\u30d7\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/h3>\n<p>[bash]<br \/>\n$ nano ..\/App.js<br \/>\n[\/bash]<\/p>\n<p>CProductMain \u95a2\u9023\u3092\u8ffd\u8a18\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>[bash]<br \/>\nimport React from &#8216;react&#8217;;<br \/>\nimport {Router, Route} from &#8220;react-router-dom&#8221;;<br \/>\nimport history from &#8216;.\/history&#8217;;<\/p>\n<p>import Home from &#8220;.\/components\/home&#8221;;<br \/>\nimport About from &#8220;.\/components\/about&#8221;;<br \/>\nimport CProduct from &#8220;.\/containers\/cproduct&#8221;;<br \/>\nimport CProductMain from &#8220;.\/containers\/cproduct_main&#8221;;<\/p>\n<p>import &#8220;.\/sass\/main.scss&#8221;;<\/p>\n<p>function App() {<br \/>\n  return (<\/p>\n<div className=\"App\">\n<h3>GraphQL \u3068 Apollo Server\u3092\u4f7f\u3063\u305f\u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9<\/h3>\n<p>      <Router history={history}><br \/>\n        <Route exact path=\"\/\" component={Home} \/><br \/>\n        <Route exact path=\"\/product\" component={CProduct} \/><br \/>\n        <Route exact path=\"\/about\" component={About} \/><br \/>\n        <Route exact path=\"\/product\/:mode\/:id\" component={CProductMain} \/><\/p>\n<p>      <\/Router>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<p>[\/bash]<\/p>\n<h3>\u52d5\u4f5c\u691c\u8a3c<\/h3>\n<p>\u3053\u3093\u306a\u611f\u3058\u3067\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3001\u65b0\u898f\u767b\u9332\u304c\u3067\u304d\u308c\u3070OK\u3067\u3059\u3002<br \/>\n\u304a\u75b2\u308c\u3055\u307e\u3067\u3057\u305f\uff01\uff01\uff01\uff01<\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47.png\" alt=\"Screenshot from 2019-05-13 21-47-47\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1924\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-47-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p>\u25a0\u65b0\u898f\u4f5c\u6210<br \/>\n<a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05.png\" alt=\"Screenshot from 2019-05-13 21-50-05\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1926\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-05-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59.png\" alt=\"Screenshot from 2019-05-13 21-47-59\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1925\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-47-59-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17.png\" alt=\"Screenshot from 2019-05-13 21-50-17\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1928\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-17-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p>\u25a0\u30c7\u30fc\u30bf\u4fee\u6b63\u30fb\u524a\u9664<\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22.png\" alt=\"Screenshot from 2019-05-13 21-50-22\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1929\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-22-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25.png\" alt=\"Screenshot from 2019-05-13 21-50-25\" width=\"806\" height=\"662\" class=\"alignnone size-large wp-image-1930\" srcset=\"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25.png 1021w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25-300x246.png 300w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25-768x630.png 768w, https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-13-21-50-25-104x84.png 104w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &#8220;react&#8221;; import {withRouter} from &#8220;react-router-dom&#8221;; import Menu from &#8220;.\/menu&#8221;; 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} onClickEdit(bd.id, this.props.history)}>\u7de8\u96c6 ); } return ( This is Product onAddNew(this.props.history)}>\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210 {lstBody} ) } } export default withRouter(Product); [\/bash] \u4e00\u89a7\u753b\u9762\u306b\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u306e\u7de8\u96c6 onClickEdit,onAddNew \u3067\u30da\u30fc\u30b8\u9077\u79fb\u3055\u305b\u308b\u3068\u3053\u308d\u304c\u4e3b\u306a\u5909\u66f4\u70b9\u3002 [bash] $ nano containers\/cproduct.js [\/bash] [bash] import {connect} from &#8220;react-redux&#8221;; import {GraphQLClient} from &#8220;graphql-request&#8221;; import Product from &#8220;..\/components\/product&#8221;; import {set_list_body, set_has_more} from &#8220;..\/actions\/product&#8221;; const GET_PRODUCTS = ` query GetProducts ($offset: Int!, $limit: Int!){ getProducts(offset: $offset, limit: $limit){ has_more products { id product_name price } } } `; const HOST_ADDR = &#8220;http:\/\/localhost:4000&#8221;; 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 mapDispatchToProps = (dispatch) => { return { onInit: () => { LIST_OFFSET = 0; onLoadData(LIST_OFFSET, [], dispatch) }, onClickEdit: (id, history) => { history.push(&#8220;\/product\/edit\/&#8221; + id); }, onAddNew: (history) => { history.push(&#8220;\/product\/add\/none&#8221;); }, onLoadMore: (list_body) => { onLoadData(LIST_OFFSET, list_body, dispatch); }, } } 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 + &#8220;\/graphql&#8221;, { headers: { &#8220;x-token&#8221;: &#8220;test-test&#8221;, }, }); return client; } const CProduct = connect(mapStateToProps, mapDispatchToProps)(Product) export default CProduct [\/bash] \u30c7\u30fc\u30bf\u7de8\u96c6\u753b\u9762 \u4e00\u89a7\u753b\u9762\u304b\u3089&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1914,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[77],"tags":[102,101,86],"class_list":{"0":"post-1920","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-apollo","9":"tag-graphql","10":"tag-react"},"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &quot;react&quot;; import {withRouter} from &quot;react-router-dom&quot;; import Menu from &quot;.\/menu&quot;; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"hiroshi\"\/>\n\t<meta name=\"google-site-verification\" content=\"fo5n0bjUdcitu1FsBTJqqwL580wBLhhCM51IEogDt9Y\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/lovelinux.mydns.jp\/?p=1920\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_GB\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Love Linux | enjoy using linux for programming flatform\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5\" \/>\n\t\t<meta property=\"og:description\" content=\"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &quot;react&quot;; import {withRouter} from &quot;react-router-dom&quot;; import Menu from &quot;.\/menu&quot;; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/lovelinux.mydns.jp\/?p=1920\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-05-13T13:15:45+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-05-13T13:16:04+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &quot;react&quot;; import {withRouter} from &quot;react-router-dom&quot;; import Menu from &quot;.\/menu&quot;; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#article\",\"name\":\"Apollo Server\\u3001GraphQL\\u3001nodejs\\u3001sequesize\\u3001\\u30d5\\u30ed\\u30f3\\u30c8\\u306bReact+Redux\\u3067 \\u30de\\u30b9\\u30bf\\u30fc\\u30e1\\u30f3\\u30c6\\u30ca\\u30f3\\u30b9\\u3092\\u4f5c\\u308d\\u3046! \\u301cVol.5\",\"headline\":\"Apollo Server\\u3001GraphQL\\u3001nodejs\\u3001sequesize\\u3001\\u30d5\\u30ed\\u30f3\\u30c8\\u306bReact+Redux\\u3067 \\u30de\\u30b9\\u30bf\\u30fc\\u30e1\\u30f3\\u30c6\\u30ca\\u30f3\\u30b9\\u3092\\u4f5c\\u308d\\u3046! \\u301cVol.5\",\"author\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?author=1#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/catch.png\",\"width\":1178,\"height\":449},\"datePublished\":\"2019-05-13T22:15:45+09:00\",\"dateModified\":\"2019-05-13T22:16:04+09:00\",\"inLanguage\":\"en-GB\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#webpage\"},\"articleSection\":\"React, Apollo, GraphQL, react\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lovelinux.mydns.jp\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=2#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=2#listItem\",\"position\":2,\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\",\"item\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=2\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=77#listItem\",\"name\":\"React\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=77#listItem\",\"position\":3,\"name\":\"React\",\"item\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=77\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#listItem\",\"name\":\"Apollo Server\\u3001GraphQL\\u3001nodejs\\u3001sequesize\\u3001\\u30d5\\u30ed\\u30f3\\u30c8\\u306bReact+Redux\\u3067 \\u30de\\u30b9\\u30bf\\u30fc\\u30e1\\u30f3\\u30c6\\u30ca\\u30f3\\u30b9\\u3092\\u4f5c\\u308d\\u3046! \\u301cVol.5\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=2#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#listItem\",\"position\":4,\"name\":\"Apollo Server\\u3001GraphQL\\u3001nodejs\\u3001sequesize\\u3001\\u30d5\\u30ed\\u30f3\\u30c8\\u306bReact+Redux\\u3067 \\u30de\\u30b9\\u30bf\\u30fc\\u30e1\\u30f3\\u30c6\\u30ca\\u30f3\\u30b9\\u3092\\u4f5c\\u308d\\u3046! \\u301cVol.5\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?cat=77#listItem\",\"name\":\"React\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?author=1#author\",\"url\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?author=1\",\"name\":\"hiroshi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7c5ca03ae8cd5b5d36ac0f62f59c26d34fd667afa57dafb4978790c04c5146f?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"hiroshi\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#webpage\",\"url\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920\",\"name\":\"Apollo Server\\u3001GraphQL\\u3001nodejs\\u3001sequesize\\u3001\\u30d5\\u30ed\\u30f3\\u30c8\\u306bReact+Redux\\u3067 \\u30de\\u30b9\\u30bf\\u30fc\\u30e1\\u30f3\\u30c6\\u30ca\\u30f3\\u30b9\\u3092\\u4f5c\\u308d\\u3046! \\u301cVol.5\",\"description\":\"\\u524d\\u56de\\u306b\\u5f15\\u304d\\u7d9a\\u304d \\u524d\\u56de\\u307e\\u3067\\u3067\\u3001\\u30c7\\u30fc\\u30bf\\u4e00\\u89a7\\u3092\\u8868\\u793a\\u3059\\u308b\\u3068\\u3053\\u308d\\u306f\\u3067\\u304d\\u307e\\u3057\\u305f\\u3002 \\u4eca\\u56de\\u306f\\u6700\\u7d42\\u4ed5\\u4e0a\\u3052\\u3001\\u4e00\\u89a7\\u304b\\u3089\\u7de8\\u96c6\\u30dc\\u30bf\\u30f3\\u3092\\u62bc\\u3057\\u3001\\u30c7\\u30fc\\u30bf\\u306e\\u7de8\\u96c6\\u753b\\u9762\\u306b\\u79fb\\u52d5\\u3057\\u3001\\u30c7\\u30fc\\u30bf\\u306e\\u4fee\\u6b63\\u30fb\\u524a\\u9664\\u3002 \\u4e00\\u89a7\\u304b\\u3089\\u3001\\u65b0\\u898f\\u30c7\\u30fc\\u30bf\\u4f5c\\u6210\\u30dc\\u30bf\\u30f3\\u3092\\u62bc\\u3057\\u3001\\u30c7\\u30fc\\u30bf\\u306e\\u65b0\\u898f\\u4f5c\\u6210\\u3002 \\u7d30\\u304b\\u304f\\u8aac\\u660e\\u3059\\u308b\\u3068\\u975e\\u5e38\\u306b\\u6642\\u9593\\u304c\\u304b\\u304b\\u308b\\u306e\\u3067\\u3001\\u30bd\\u30fc\\u30b9\\u30b3\\u30fc\\u30c9\\u3092\\u8cbc\\u308a\\u4ed8\\u3051\\u308b\\u306e\\u3092\\u30e1\\u30a4\\u30f3\\u306b\\u3057\\u307e\\u3059\\u3002 \\u3053\\u306e\\u8a18\\u4e8b\\u306f\\uff15\\u56de\\u306b\\u5206\\u3051\\u3066\\u9023\\u8f09\\u3059\\u308b\\u3001\\u7b2c\\uff15\\u56de\\u306e\\u8a18\\u4e8b\\u3067\\u3059\\u3002 \\u30fb\\u7b2c\\uff11\\u56de Apollo Server\\u304c\\u52d5\\u304f\\u3068\\u3053\\u308d\\u307e\\u3067 \\u30fb\\u7b2c\\uff12\\u56de Apollo Server\\u914d\\u4e0b\\u3067\\u3001GraphQL\\u3092\\u4f7f\\u3063\\u3066\\u5546\\u54c1\\u30de\\u30b9\\u30bf\\u30fc\\u306b\\u30a2\\u30af\\u30bb\\u30b9\\u3059\\u308b \\u30fb\\u7b2c\\uff13\\u56de \\u30d5\\u30ed\\u30f3\\u30c8\\u30a8\\u30f3\\u30c9\\u3092React\\uff0bRedux\\uff0bgraphql-request\\u3092\\u4f7f\\u3063\\u3066\\u5b9f\\u88c5\\u3059\\u308b \\u30fb\\u7b2c\\uff14\\u56de \\u30d5\\u30ed\\u30f3\\u30c8\\u30a8\\u30f3\\u30c9\\u304b\\u3089graphql-request\\u3092\\u4f7f\\u3063\\u3066\\u3001\\u30c7\\u30fc\\u30bf\\u3092\\u53d6\\u5f97\\u30fb\\u8868\\u793a\\u3059\\u308b \\u30fb\\u7b2c\\uff15\\u56de graphql-request\\u3092\\u4f7f\\u3063\\u3066\\u3001\\u30c7\\u30fc\\u30bf\\u3092\\u767b\\u9332\\u30fb\\u4fee\\u6b63\\u30fb\\u524a\\u9664\\u3059\\u308b\\uff08\\u3053\\u306e\\u8a18\\u4e8b\\uff09 \\u30d5\\u30a1\\u30a4\\u30eb\\u30c4\\u30ea\\u30fc \\u4eca\\u56de\\u3082\\u5b8c\\u6210\\u5f62\\u306e\\u30d5\\u30a1\\u30a4\\u30eb\\u30c4\\u30ea\\u30fc\\u3092\\u307e\\u305a\\u793a\\u3057\\u3066\\u304a\\u304d\\u307e\\u3059\\u3002 \\u4e00\\u89a7\\u753b\\u9762\\u306e\\u7de8\\u96c6 \\u5909\\u66f4\\u7b87\\u6240\\u306f\\u300c\\u65b0\\u898f\\u30c7\\u30fc\\u30bf\\u4f5c\\u6210\\u300d\\u30dc\\u30bf\\u30f3\\u3092\\u8ffd\\u52a0\\u3057\\u305f\\u3068\\u3053\\u308d\\u3068\\u3001React\\u304c\\u8b66\\u544a\\u3092\\u51fa\\u3057\\u3066\\u3044\\u305f\\u306e\\u3067\\u3001 \\u660e\\u7d30\\u696d\\u306e\\u30c7\\u30fc\\u30bf\\u306b key \\u3092\\u4ed8\\u4e0e\\u3057\\u305f\\u3068\\u3053\\u308d\\u3067\\u3057\\u3087\\u3046\\u304b\\u3002 [bash] $ nano components\\\/product.js [\\\/bash] [bash] import React from \\\"react\\\"; import {withRouter} from \\\"react-router-dom\\\"; import Menu from \\\".\\\/menu\\\"; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,\",\"inLanguage\":\"en-GB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?author=1#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?author=1#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/catch.png\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920\\\/#mainImage\",\"width\":1178,\"height\":449},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/?p=1920#mainImage\"},\"datePublished\":\"2019-05-13T22:15:45+09:00\",\"dateModified\":\"2019-05-13T22:16:04+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/#website\",\"url\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/\",\"name\":\"Love Linux\",\"description\":\"enjoy using linux for programming flatform\",\"inLanguage\":\"en-GB\",\"publisher\":{\"@id\":\"https:\\\/\\\/lovelinux.mydns.jp\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","description":"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from \"react\"; import {withRouter} from \"react-router-dom\"; import Menu from \".\/menu\"; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,","canonical_url":"https:\/\/lovelinux.mydns.jp\/?p=1920","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"fo5n0bjUdcitu1FsBTJqqwL580wBLhhCM51IEogDt9Y","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#article","name":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","headline":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","author":{"@id":"https:\/\/lovelinux.mydns.jp\/?author=1#author"},"publisher":{"@id":"https:\/\/lovelinux.mydns.jp\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/catch.png","width":1178,"height":449},"datePublished":"2019-05-13T22:15:45+09:00","dateModified":"2019-05-13T22:16:04+09:00","inLanguage":"en-GB","mainEntityOfPage":{"@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#webpage"},"isPartOf":{"@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#webpage"},"articleSection":"React, Apollo, GraphQL, react"},{"@type":"BreadcrumbList","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp#listItem","position":1,"name":"Home","item":"https:\/\/lovelinux.mydns.jp","nextItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=2#listItem","name":"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0"}},{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=2#listItem","position":2,"name":"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0","item":"https:\/\/lovelinux.mydns.jp\/?cat=2","nextItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=77#listItem","name":"React"},"previousItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=77#listItem","position":3,"name":"React","item":"https:\/\/lovelinux.mydns.jp\/?cat=77","nextItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#listItem","name":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5"},"previousItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=2#listItem","name":"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0"}},{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#listItem","position":4,"name":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","previousItem":{"@type":"ListItem","@id":"https:\/\/lovelinux.mydns.jp\/?cat=77#listItem","name":"React"}}]},{"@type":"Person","@id":"https:\/\/lovelinux.mydns.jp\/?author=1#author","url":"https:\/\/lovelinux.mydns.jp\/?author=1","name":"hiroshi","image":{"@type":"ImageObject","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/e7c5ca03ae8cd5b5d36ac0f62f59c26d34fd667afa57dafb4978790c04c5146f?s=96&d=mm&r=g","width":96,"height":96,"caption":"hiroshi"}},{"@type":"WebPage","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#webpage","url":"https:\/\/lovelinux.mydns.jp\/?p=1920","name":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","description":"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from \"react\"; import {withRouter} from \"react-router-dom\"; import Menu from \".\/menu\"; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,","inLanguage":"en-GB","isPartOf":{"@id":"https:\/\/lovelinux.mydns.jp\/#website"},"breadcrumb":{"@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#breadcrumblist"},"author":{"@id":"https:\/\/lovelinux.mydns.jp\/?author=1#author"},"creator":{"@id":"https:\/\/lovelinux.mydns.jp\/?author=1#author"},"image":{"@type":"ImageObject","url":"https:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2019\/05\/catch.png","@id":"https:\/\/lovelinux.mydns.jp\/?p=1920\/#mainImage","width":1178,"height":449},"primaryImageOfPage":{"@id":"https:\/\/lovelinux.mydns.jp\/?p=1920#mainImage"},"datePublished":"2019-05-13T22:15:45+09:00","dateModified":"2019-05-13T22:16:04+09:00"},{"@type":"WebSite","@id":"https:\/\/lovelinux.mydns.jp\/#website","url":"https:\/\/lovelinux.mydns.jp\/","name":"Love Linux","description":"enjoy using linux for programming flatform","inLanguage":"en-GB","publisher":{"@id":"https:\/\/lovelinux.mydns.jp\/#person"}}]},"og:locale":"en_GB","og:site_name":"Love Linux | enjoy using linux for programming flatform","og:type":"article","og:title":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","og:description":"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &quot;react&quot;; import {withRouter} from &quot;react-router-dom&quot;; import Menu from &quot;.\/menu&quot;; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,","og:url":"https:\/\/lovelinux.mydns.jp\/?p=1920","article:published_time":"2019-05-13T13:15:45+00:00","article:modified_time":"2019-05-13T13:16:04+00:00","twitter:card":"summary_large_image","twitter:title":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","twitter:description":"\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d \u524d\u56de\u307e\u3067\u3067\u3001\u30c7\u30fc\u30bf\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u306f\u3067\u304d\u307e\u3057\u305f\u3002 \u4eca\u56de\u306f\u6700\u7d42\u4ed5\u4e0a\u3052\u3001\u4e00\u89a7\u304b\u3089\u7de8\u96c6\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3001\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u30fb\u524a\u9664\u3002 \u4e00\u89a7\u304b\u3089\u3001\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u30c7\u30fc\u30bf\u306e\u65b0\u898f\u4f5c\u6210\u3002 \u7d30\u304b\u304f\u8aac\u660e\u3059\u308b\u3068\u975e\u5e38\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u306e\u3067\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u306e\u3092\u30e1\u30a4\u30f3\u306b\u3057\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306f\uff15\u56de\u306b\u5206\u3051\u3066\u9023\u8f09\u3059\u308b\u3001\u7b2c\uff15\u56de\u306e\u8a18\u4e8b\u3067\u3059\u3002 \u30fb\u7b2c\uff11\u56de Apollo Server\u304c\u52d5\u304f\u3068\u3053\u308d\u307e\u3067 \u30fb\u7b2c\uff12\u56de Apollo Server\u914d\u4e0b\u3067\u3001GraphQL\u3092\u4f7f\u3063\u3066\u5546\u54c1\u30de\u30b9\u30bf\u30fc\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b \u30fb\u7b2c\uff13\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092React\uff0bRedux\uff0bgraphql-request\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b \u30fb\u7b2c\uff14\u56de \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3059\u308b \u30fb\u7b2c\uff15\u56de graphql-request\u3092\u4f7f\u3063\u3066\u3001\u30c7\u30fc\u30bf\u3092\u767b\u9332\u30fb\u4fee\u6b63\u30fb\u524a\u9664\u3059\u308b\uff08\u3053\u306e\u8a18\u4e8b\uff09 \u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc \u4eca\u56de\u3082\u5b8c\u6210\u5f62\u306e\u30d5\u30a1\u30a4\u30eb\u30c4\u30ea\u30fc\u3092\u307e\u305a\u793a\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u4e00\u89a7\u753b\u9762\u306e\u7de8\u96c6 \u5909\u66f4\u7b87\u6240\u306f\u300c\u65b0\u898f\u30c7\u30fc\u30bf\u4f5c\u6210\u300d\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u305f\u3068\u3053\u308d\u3068\u3001React\u304c\u8b66\u544a\u3092\u51fa\u3057\u3066\u3044\u305f\u306e\u3067\u3001 \u660e\u7d30\u696d\u306e\u30c7\u30fc\u30bf\u306b key \u3092\u4ed8\u4e0e\u3057\u305f\u3068\u3053\u308d\u3067\u3057\u3087\u3046\u304b\u3002 [bash] $ nano components\/product.js [\/bash] [bash] import React from &quot;react&quot;; import {withRouter} from &quot;react-router-dom&quot;; import Menu from &quot;.\/menu&quot;; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body,"},"aioseo_meta_data":{"post_id":"1920","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2025-08-22 21:17:57","updated":"2025-08-25 11:30:10","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/lovelinux.mydns.jp\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/lovelinux.mydns.jp\/?cat=2\" title=\"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\">\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/lovelinux.mydns.jp\/?cat=77\" title=\"React\">React<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tApollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/lovelinux.mydns.jp"},{"label":"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0","link":"https:\/\/lovelinux.mydns.jp\/?cat=2"},{"label":"React","link":"https:\/\/lovelinux.mydns.jp\/?cat=77"},{"label":"Apollo Server\u3001GraphQL\u3001nodejs\u3001sequesize\u3001\u30d5\u30ed\u30f3\u30c8\u306bReact+Redux\u3067 \u30de\u30b9\u30bf\u30fc\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3092\u4f5c\u308d\u3046! \u301cVol.5","link":"https:\/\/lovelinux.mydns.jp\/?p=1920"}],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1920"}],"version-history":[{"count":7,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1920\/revisions"}],"predecessor-version":[{"id":1935,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1920\/revisions\/1935"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1914"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}