{"id":123,"date":"2019-10-17T01:17:40","date_gmt":"2019-10-17T01:17:40","guid":{"rendered":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/?p=123"},"modified":"2019-10-17T02:02:08","modified_gmt":"2019-10-17T02:02:08","slug":"gatsby-wordpress-rest-api-3","status":"publish","type":"post","link":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/gatsby-wordpress-rest-api-3\/","title":{"rendered":"#3 Gatsby + WordPress REST API\u3067\u30d6\u30ed\u30b0\u3092\u4f5c\u308d\u3046\u3010\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u7de8\u3011"},"content":{"rendered":"<p>\u4eca\u56de\u306fGatsby\u9023\u8f09\u306e#3\u300c\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u4f5c\u308a\u65b9\u300d\u7de8\u3067\u3059^ ^<\/p>\n<ul>\n<div class=\"listLabel\">STEPS<\/div>\n<li>Step\uff11\uff1aWordPress\u5074\u3067\u8a18\u4e8b\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8ffd\u52a0<\/li>\n<li>Step\uff12\uff1a\u8a18\u4e8b\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u5168\u90e8\u53d6\u5f97\u3059\u308b<\/li>\n<li>Step\uff13\uff1a\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u308b<\/li>\n<li>Step\uff14\uff1agatsby-node.js\u3092\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u3092\u751f\u6210\u3059\u308b\u3088\u3046\u306b\u7de8\u96c6\u3059\u308b<\/li>\n<li>Step\uff15\uff1a\u5168\u3066\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u4e00\u89a7\u3092\u8868\u793a\u3055\u305b\u308b\u30ab\u30c6\u30b4\u30ea\u30fc\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30da\u30fc\u30b8\u3092\u4f5c\u6210<\/li>\n<li>Step\uff16\uff1a\u305d\u308c\u305e\u308c\u306e\u8a18\u4e8b\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8868\u793a<\/li>\n<\/ul>\n<h2>Step\uff11\uff1aWordPress\u5074\u3067\u8a18\u4e8b\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8ffd\u52a0<\/h2>\n<p>WordPress\u3067\u4f7f\u7528\u3057\u305f\u3044\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8ffd\u52a0\u3057\u3066\u30c6\u30b9\u30c8\u3067\u3044\u304f\u3064\u304b\u30b5\u30f3\u30d7\u30eb\u8a18\u4e8b\u3092\u6e96\u5099\u3057\u3066\u304a\u304d\u307e\u3059<\/p>\n<p>\u4f55\u3082\u8a2d\u5b9a\u3057\u3066\u3044\u306a\u3044\u3068\u300cUncategorized\u300dor\u300c\u672a\u5206\u985e\u300d\u306b\u306a\u308a\u307e\u3059<\/p>\n<h2>Step\uff12\uff1a\u8a18\u4e8b\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u5168\u90e8\u53d6\u5f97\u3059\u308b<\/h2>\n<p>graphql\u306e\u753b\u9762\u3067allWordpressCategory\u3067\u5168\u3066\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u304c\u3061\u3083\u3093\u3068\u53d6\u3063\u3066\u3053\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-1.png\" alt=\"\" width=\"2880\" height=\"1578\" class=\"alignnone size-full wp-image-124\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-1.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-1-300x164.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-1-768x421.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-1-1024x561.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u3061\u3083\u3093\u3068\u53d6\u308c\u3066\u3044\u307e\u3059\u306d^ ^<\/p>\n<p>gatsby develop\u3092\u3057\u305f\u307e\u307e\u3067\u3059\u3068\u66f4\u65b0\u3055\u308c\u3066\u306a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u4e00\u65e6\u6b62\u3081\u3066gatsby develop\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n<p>\uff0aallWordpressPost\u306e\u4e2d\u306b\u3042\u308bcategories{name}\u3067\u306f\u3046\u307e\u304f\u3044\u304b\u306a\u304b\u3063\u305f\u3067\u3059<\/p>\n<h2>Step\uff13\uff1a\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u308b<\/h2>\n<p>template\u306e\u4e2d\u306bCategories.js\u3092\u4f5c\u308a\u307e\u3059<\/p>\n<p>\u3053\u308c\u304c\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u306a\u308a\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">Categories.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0{\u00a0Link,\u00a0graphql\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0Img\u00a0from\u00a0&quot;gatsby-image&quot;\r\nimport\u00a0Layout\u00a0from\u00a0&quot;..\/components\/layout&quot;\r\nimport\u00a0SEO\u00a0from\u00a0&quot;..\/components\/seo&quot;\r\n\r\nconst\u00a0Categories\u00a0=\u00a0({\u00a0data,\u00a0pageContext\u00a0})\u00a0=&gt;\u00a0{\r\n\u00a0\u00a0const\u00a0{\u00a0category\u00a0}\u00a0=\u00a0pageContext\r\n\u00a0\u00a0return\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0&lt;Layout&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;SEO\u00a0title={category}\u00a0keywords={category}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;{category}&lt;\/h2&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.allWordpressPost.edges.map(post\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0key={post.node.id}\u00a0className={&quot;post&quot;}&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Link\u00a0to={`\/${post.node.slug}`}\u00a0&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{post.node.featured_media\u00a0&amp;&amp;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Img\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid={post.node.featured_media.localFile.childImageSharp.fluid}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt={post.node.title}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3&gt;{post.node.title}&lt;\/h3&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Link&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0className={&quot;post-content&quot;}\u00a0dangerouslySetInnerHTML={{__html:\u00a0post.node.excerpt}}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{post.node.date}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/Layout&gt;\r\n\u00a0\u00a0)\r\n}\r\nexport\u00a0default\u00a0Categories\r\n\r\nexport\u00a0const\u00a0query\u00a0=\u00a0graphql`\r\n\u00a0\u00a0query\u00a0($category:\u00a0String!)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0allWordpressPost(filter:\u00a0{categories:\u00a0{elemMatch:\u00a0{name:\u00a0{eq:\u00a0$category}}}})\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...GatsbyImageSharpFluid\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0&quot;MMMM\u00a0DD,\u00a0YYYY&quot;)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n`<\/code>\r\n<\/pre>\n<\/div>\n<p>pageContext\u306b\u3064\u3044\u3066\u306f\u5f8c\u307b\u3069gatsby-node.js\u306e\u7b87\u6240\u3067\u89e3\u8aac\u3057\u307e\u3059<\/p>\n<p>query\u3067\u306f$category : String!\u3067\u4f8b\u3048\u3070\u201dtest\u201d\u30ab\u30c6\u30b4\u30ea\u304c\u6e21\u3063\u3066\u304d\u3066\u3001\u305d\u306e\u30ab\u30c6\u30b4\u30ea\u306b\u30de\u30c3\u30c1\u3059\u308b\u8a18\u4e8b\u3092\u5168\u90e8\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u30d5\u30a3\u30eb\u30bf\u30fc\u306b\u304b\u3051\u3066\u3044\u307e\u3059<\/p>\n<p>graphql\u306e\u30da\u30fc\u30b8\u3067\u898b\u3066\u307f\u308b\u3068\u3042\u308b\u7a0b\u5ea6\u308f\u304b\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001query($category: String!)\u3068\u66f8\u3044\u3066\u3082\u3061\u3083\u3093\u3068\u52d5\u3044\u3066\u304f\u308c\u306a\u3044\u306e\u3067\u3001\u5b9f\u969b\u306b\u66f8\u3044\u3066gatsby develop\u3092\u3057\u3066\u78ba\u8a8d\u3059\u308b\u3057\u304b\u7121\u3044\u3067\u3059<\/p>\n<p>\u307e\u3060gatsby-node.js\u3092\u7de8\u96c6\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u4f55\u3082\u304a\u304d\u307e\u305b\u3093<\/p>\n<h2>Step\uff14\uff1agatsby-node.js\u3092\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u3092\u751f\u6210\u3059\u308b\u3088\u3046\u306b\u7de8\u96c6\u3059\u308b<\/h2>\n<p>\u307e\u305alodash\u3092\u4f7f\u3044\u305f\u3044\u306e\u3067npm\u304byarn\u3067lodash\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">Terminal<\/div>\n<pre>\r\n<code class=\"language-bash\">npm install --save lodash\r\nor\r\nyarn add lodash<\/code>\r\n<\/pre>\n<\/div>\n<p>gatsby-node.js\u306b\u8ffd\u8a18\u3057\u3066\u3044\u304d\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">gatsby-node.js<\/div>\n<pre>\r\n<code class=\"language-js\">const\u00a0path\u00a0=\u00a0require(`path`)\r\nconst\u00a0_\u00a0=\u00a0require(`lodash`) \/\/<-lodash\u3092require\r\nconst\u00a0createPaginatedPages\u00a0=\u00a0require('gatsby-paginate')\r\n\r\nexports.createPages\u00a0=\u00a0async\u00a0({\u00a0graphql,\u00a0actions,\u00a0reporter\u00a0})\u00a0=>\u00a0{\r\n\u00a0\u00a0const\u00a0{\u00a0createPage\u00a0}\u00a0=\u00a0actions\r\n\u00a0\u00a0const\u00a0BlogPostTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/BlogPost.js\")\r\n\u00a0\u00a0const\u00a0PageTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/Page.js\")\r\n\u00a0\u00a0const\u00a0CatTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/Categories.js\") \/\/<-\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\r\n\r\n\u00a0\u00a0const\u00a0result\u00a0=\u00a0await\u00a0graphql(`\r\n\u00a0\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allWordpressPost\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0\"MMMM\u00a0DD,\u00a0YYYY\")\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wordpress_id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srcSet\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aspectRatio\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sizes\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0base64\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allWordpressPage\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wordpress_id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allWordpressCategory\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0`)\r\n\u00a0\u00a0if\u00a0(result.errors)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0reporter.panicOnBuild(`Error\u00a0while\u00a0running\u00a0GraphQL\u00a0query.`)\r\n\u00a0\u00a0\u00a0\u00a0return\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0const\u00a0BlogPosts\u00a0=\u00a0result.data.allWordpressPost.edges\r\n\u00a0\u00a0BlogPosts.forEach(post\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/${post.node.slug}`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0BlogPostTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id:\u00a0post.node.wordpress_id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0})\r\n\r\n\u00a0\u00a0const\u00a0Pages\u00a0=\u00a0result.data.allWordpressPage.edges\r\n\u00a0\u00a0\u00a0\u00a0Pages.forEach(page\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/${page.node.slug}`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0PageTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id:\u00a0page.node.wordpress_id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\r\n\u00a0\u00a0createPaginatedPages({\r\n\u00a0\u00a0\u00a0\u00a0edges:\u00a0BlogPosts,\r\n\u00a0\u00a0\u00a0\u00a0createPage:\u00a0createPage,\r\n\u00a0\u00a0\u00a0\u00a0pageTemplate:\u00a0'src\/templates\/Pagination.js',\r\n\u00a0\u00a0\u00a0\u00a0pageLength:\u00a05,\r\n\u00a0\u00a0\u00a0\u00a0pathPrefix:\u00a0'posts',\r\n\u00a0\u00a0})\r\n\r\n  \/\/ \u5168\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u540d\u524d\u3092\u53d6\u5f97\u3057cats\u306e\u4e2d\u306b\u5165\u308c\u308b\r\n\u00a0\u00a0const\u00a0BlogCategories\u00a0=\u00a0result.data.allWordpressCategory.edges\r\n\u00a0\u00a0let\u00a0cats\u00a0=\u00a0[]\r\n\u00a0\u00a0_.each(BlogCategories,\u00a0edge\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(_.get(edge,\u00a0\"node.name\"))\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cats\u00a0=\u00a0cats.concat(edge.node.name)\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0})\r\n  \/\/ \u88ab\u3063\u305f\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u6392\u9664\r\n\u00a0\u00a0cats\u00a0=\u00a0_.uniq(cats)\r\n\r\n  \/\/ \u53d6\u3063\u3066\u304d\u305f\u30ab\u30c6\u30b4\u30ea\u30fc\u6bce\u306b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8(Categories.js)\u3092\u4f7f\u3063\u3066\u30da\u30fc\u30b8\u3092\u751f\u6210\u3059\u308b\r\n\u00a0\u00a0cats.forEach(category\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/categories\/${_.kebabCase(category)}\/`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0CatTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0category:\u00a0category, \/\/<-\u3053\u308c\u304cpageContext\u3068\u3057\u3066Categories.js\u306b\u6e21\u308b\u3001query\u3067($category: String!)\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308b\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0})\r\n}<\/code>\r\n<\/pre>\n<\/div>\n<p>\u30b3\u30e1\u30f3\u30c8\u3067\u5c11\u3057\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306f\u8d85\u7c21\u5358\u306b\u8a00\u3046\u3068\u300c\u5168\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u53d6\u5f97\u3057\u3066\u305d\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u6bce\u306b\u30da\u30fc\u30b8\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8(Categories.js)\u3092\u4f7f\u7528\u3057\u3066\u751f\u6210\u3057\u3066\u3044\u308b\u300d\u3068\u3044\u3046\u3053\u3068\u3067\u3059<\/p>\n<p>allWordpressPost\u3068allWordpressPage\u3068\u5225\u306ballWordpressCategory\u3092\u8ffd\u52a0\u3057\u3066\u5168\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u30c7\u30fc\u30bf\u3092\u5f15\u3063\u5f35\u3063\u3066\u304d\u3066\u3044\u307e\u3059<\/p>\n<p>categories\/test\/\u306b\u884c\u304f\u3068\u3061\u3083\u3093\u3068\u201dtest\u201d\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u8a18\u4e8b\u304c\u8868\u793a\u3055\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p>allWordpressPost\u5185\u306ecategories{name}\u3067\u5f15\u3063\u5f35\u3063\u3066\u304d\u3066\u540c\u3058\u3053\u3068\u3092\u3057\u3088\u3046\u3068\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u3046\u307e\u304f\u3044\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3084\u3081\u307e\u3057\u305fw\u2028<\/p>\n<h3>\uff0a\u8ffd\u8a18\uff1aallWordpressPost\u5185\u306ecategories{name}\u304b\u3089\u3067\u3082\u3044\u3051\u307e\u3057\u305f!!w<\/h3>\n<p>~~categories.name\u3067\u53d6\u308d\u3046\u3068\u3057\u3066\u3044\u305f\u306e\u3092categories[0].name\u306b\u5909\u3048\u308b\u3068\u3061\u3083\u3093\u3068\u53d6\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f<\/p>\n<p>console\u3067\u5f15\u3063\u5f35\u3063\u3066\u304d\u3066\u3044\u308b\u30c7\u30fc\u30bf\u3092\u307f\u308b\u3068\u3001categories.name\u3067\u306f\u306a\u304f\u3001categories[0]\u306e\u4e2d\u306bname\u304c\u3042\u308b\u306e\u304c\u308f\u304b\u308a\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-6.png\" alt=\"\" width=\"872\" height=\"738\" class=\"alignnone size-full wp-image-126\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-6.png 872w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-6-300x254.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-6-768x650.png 768w\" sizes=\"(max-width: 872px) 100vw, 872px\" \/><\/p>\n<p>\u306a\u306e\u3067\u66f8\u304d\u63db\u3048\u3066\u307f\u307e\u3057\u305fw<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">gatsby-node.js<\/div>\n<pre>\r\n<code class=\"language-js\">const\u00a0path\u00a0=\u00a0require(`path`)\r\nconst\u00a0_\u00a0=\u00a0require(`lodash`)\r\nconst\u00a0createPaginatedPages\u00a0=\u00a0require('gatsby-paginate')\r\n\r\nexports.createPages\u00a0=\u00a0async\u00a0({\u00a0graphql,\u00a0actions,\u00a0reporter\u00a0})\u00a0=>\u00a0{\r\n\u00a0\u00a0const\u00a0{\u00a0createPage\u00a0}\u00a0=\u00a0actions\r\n\u00a0\u00a0const\u00a0BlogPostTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/BlogPost.js\")\r\n\u00a0\u00a0const\u00a0PageTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/Page.js\")\r\n\u00a0\u00a0const\u00a0CatTemplate\u00a0=\u00a0path.resolve(\".\/src\/templates\/Categories.js\")\r\n\r\n\u00a0\u00a0const\u00a0result\u00a0=\u00a0await\u00a0graphql(`\r\n\u00a0\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allWordpressPost\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0\"YYYY.MM.DD\")\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wordpress_id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srcSet\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aspectRatio\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sizes\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0base64\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0allWordpressPage\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wordpress_id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0`)\r\n\u00a0\u00a0if\u00a0(result.errors)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0reporter.panicOnBuild(`Error\u00a0while\u00a0running\u00a0GraphQL\u00a0query.`)\r\n\u00a0\u00a0\u00a0\u00a0return\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0const\u00a0BlogPosts\u00a0=\u00a0result.data.allWordpressPost.edges\r\n\u00a0\u00a0BlogPosts.forEach(post\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/${post.node.slug}`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0BlogPostTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id:\u00a0post.node.wordpress_id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0})\r\n\r\n\u00a0\u00a0const\u00a0Pages\u00a0=\u00a0result.data.allWordpressPage.edges\r\n\u00a0\u00a0\u00a0\u00a0Pages.forEach(page\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/${page.node.slug}`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0PageTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id:\u00a0page.node.wordpress_id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\r\n\u00a0\u00a0createPaginatedPages({\r\n\u00a0\u00a0\u00a0\u00a0edges:\u00a0BlogPosts,\r\n\u00a0\u00a0\u00a0\u00a0createPage:\u00a0createPage,\r\n\u00a0\u00a0\u00a0\u00a0pageTemplate:\u00a0'src\/templates\/Pagination.js',\r\n\u00a0\u00a0\u00a0\u00a0pageLength:\u00a05,\r\n\u00a0\u00a0\u00a0\u00a0pathPrefix:\u00a0'posts',\r\n\u00a0\u00a0})\r\n\r\n\u00a0\u00a0const\u00a0BlogCategories\u00a0=\u00a0result.data.allWordpressPost.edges\r\n\u00a0\u00a0let\u00a0cats\u00a0=\u00a0[]\r\n\u00a0\u00a0_.each(BlogCategories,\u00a0edge\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(_.get(edge,\u00a0\"node.categories[0].name\"))\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cats\u00a0=\u00a0cats.concat(edge.node.categories[0].name)\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0})\r\n\u00a0\u00a0cats\u00a0=\u00a0_.uniq(cats)\r\n\r\n\u00a0\u00a0cats.forEach(category\u00a0=>\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0createPage({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0path:\u00a0`\/categories\/${_.kebabCase(category)}\/`,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component:\u00a0CatTemplate,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context:\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0category:\u00a0category,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0})\r\n\u00a0\u00a0})\r\n}<\/code>\r\n<\/pre>\n<\/div>\n<p>\u3053\u308c\u3067\u3082\u3061\u3083\u3093\u3068\u8868\u793a\u3055\u308c\u307e\u3057\u305f\uff01\uff01<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-2.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-127\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-2.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-2-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-2-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-2-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u201cuncategorized\u201d\u3082\u3044\u3051\u3066\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-3.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-128\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-3.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-3-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-3-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-3-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>gatsby build\u30b3\u30de\u30f3\u30c9\u3092\u3059\u308b\u3068public\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e2d\u306bcategories\u30d5\u30a9\u30eb\u30c0\u304c\u751f\u6210\u3055\u308c\u3066\u305d\u306e\u4e2d\u306b\u5168\u30ab\u30c6\u30b4\u30ea\u30fc\u304c\u5165\u3063\u3066\u3044\u308b\u306e\u304c\u308f\u304b\u308b\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-4.png\" alt=\"\" width=\"600\" height=\"622\" class=\"alignnone size-full wp-image-129\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-4.png 600w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-4-289x300.png 289w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>\u3053\u308c\u3067\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u4f5c\u308a\u65b9\u306e\u57fa\u790e\u306f\u308f\u304b\u3063\u305f\u304b\u3068\u601d\u3044\u307e\u3059^ ^<\/p>\n<p>\u30b9\u30c6\u30c3\u30d7\uff15\uff1a\u5168\u3066\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u4e00\u89a7\u3092\u8868\u793a\u3055\u305b\u308b\u30ab\u30c6\u30b4\u30ea\u30fc\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30da\u30fc\u30b8\u3092\u4f5c\u6210<br \/>\n\u5fc5\u8981\u304b\u3069\u3046\u304b\u306f\u3055\u3066\u304a\u304d\u3001categories\u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u6642\u306b\u8868\u793a\u3059\u308b\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u4e00\u89a7\u30da\u30fc\u30b8\u3092\u4f5c\u308a\u307e\u3059<\/p>\n<p>pages\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e2d\u306bcategories.js\u3092\u4f5c\u308b\u3060\u3051\u3067\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">categories.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0{\u00a0graphql,\u00a0Link\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0Layout\u00a0from\u00a0&quot;..\/components\/layout&quot;\r\nimport\u00a0SEO\u00a0from\u00a0&quot;..\/components\/seo&quot;\r\n\r\nconst\u00a0CategoriesIndex\u00a0=\u00a0({\u00a0data\u00a0})\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0&lt;Layout&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;SEO\u00a0title=&quot;Categories&quot;\u00a0keywords=&quot;\u30ab\u30c6\u30b4\u30ea\u30fc\u4e00\u89a7\u30da\u30fc\u30b8&quot;\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.allWordpressCategory.edges.map(post\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li\u00a0key={post.node.id}&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Link\u00a0to={`\/categories\/${post.node.slug}`}\u00a0&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{post.node.name}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Link&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/ul&gt;\r\n\u00a0\u00a0&lt;\/Layout&gt;\r\n)\r\n\r\nexport\u00a0default\u00a0CategoriesIndex\r\n\r\nexport\u00a0const\u00a0query\u00a0=\u00a0graphql`\r\n\u00a0\u00a0query\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0allWordpressCategory\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n`<\/code>\r\n<\/pre>\n<\/div>\n<p>\u8d85\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u306d<\/p>\n<p>\u3053\u3093\u306a\u611f\u3058\u3067\u3061\u3083\u3093\u3068\u30ab\u30c6\u30b4\u30ea\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u3068\u601d\u3044\u307e\u3059^ ^<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-5.png\" alt=\"\" width=\"2880\" height=\"1577\" class=\"alignnone size-full wp-image-130\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-5.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-5-300x164.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-5-768x421.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-5-1024x561.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<h2>Step\uff16\uff1a\u305d\u308c\u305e\u308c\u306e\u8a18\u4e8b\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8868\u793a<\/h2>\n<p>\u3044\u304f\u3064\u304b\u4f8b\u3092\u6319\u3052\u3066\u304a\u304d\u307e\u3059<\/p>\n<p>\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306fquery\u306bcategories{name}\u3092\u8ffd\u52a0\u3057\u3066\u3001~~categories[0].name\u3067\u8868\u793a\u3057\u3066\u3044\u308b\u3060\u3051\u306a\u306e\u3067\u3059\u3093\u306a\u308a\u8868\u793a\u3067\u304d\u308b\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">pages\/index.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0{\u00a0graphql,\u00a0Link\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0Img\u00a0from\u00a0&quot;gatsby-image&quot;\r\nimport\u00a0Layout\u00a0from\u00a0&quot;..\/components\/layout&quot;\r\nimport\u00a0SEO\u00a0from\u00a0&quot;..\/components\/seo&quot;\r\n\r\nconst\u00a0IndexPage\u00a0=\u00a0({\u00a0data\u00a0})\u00a0=&gt;\u00a0{\r\n\u00a0\u00a0return(\r\n\u00a0\u00a0&lt;Layout&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;SEO\u00a0title=&quot;Home&quot;\u00a0keywords={[`gatsby`,\u00a0`test`,\u00a0`sample`]}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.allWordpressPost.edges.map(post\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li\u00a0key={post.node.id}&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Link\u00a0to={`\/${post.node.slug}`}\u00a0&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{post.node.featured_media\u00a0&amp;&amp;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Img\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid={post.node.featured_media.localFile.childImageSharp.fluid}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt={post.node.title}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h3\u00a0dangerouslySetInnerHTML={{\u00a0__html:\u00a0post.node.title\u00a0}}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{post.node.date}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{post.node.categories[0].name}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0dangerouslySetInnerHTML={{\u00a0__html:\u00a0post.node.excerpt\u00a0}}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Link&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/ul&gt;\r\n\u00a0\u00a0&lt;\/Layout&gt;\r\n)\r\n}\r\n\r\nexport\u00a0default\u00a0IndexPage\r\n\r\nexport\u00a0const\u00a0query\u00a0=\u00a0graphql`\r\n\u00a0\u00a0query\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0allWordpressPost(sort:\u00a0{order:\u00a0DESC,\u00a0fields:\u00a0date})\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0edges\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0&quot;YYYY.MM.DD&quot;)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...GatsbyImageSharpFluid\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n`<\/code>\r\n<\/pre>\n<\/div>\n<p>\u3053\u308c\u3067\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u8a18\u4e8b\u306e\u65e5\u4ed8\u306e\u6a2a\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u540d\u304c\u8868\u793a\u3055\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-7.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-132\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-7.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-7-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-7-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-7-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u308f\u304b\u308a\u306b\u304f\u3044\u304b\u3082\u3067\u3059\u304c\u3001\u65e5\u4ed8\u306e\u6a2a\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u540d\u306e\u201dtest\u201d\u3068\u201duncategorized\u201d\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f<\/p>\n<p>\u8a18\u4e8b\u30da\u30fc\u30b8\u306b\u3082\u8868\u793a\u3055\u305b\u3066\u307f\u307e\u3059<\/p>\n<div class=\"gatsby-highlight\">\n<div class=\"codeLabel\">BlogPost.js<\/div>\n<pre>\r\n<code class=\"language-js\">import\u00a0React\u00a0from\u00a0&quot;react&quot;\r\nimport\u00a0{\u00a0graphql\u00a0}\u00a0from\u00a0&quot;gatsby&quot;\r\nimport\u00a0Img\u00a0from\u00a0&quot;gatsby-image&quot;\r\nimport\u00a0Layout\u00a0from\u00a0&quot;..\/components\/layout&quot;\r\nimport\u00a0SEO\u00a0from\u00a0&quot;..\/components\/seo&quot;\r\n\r\nconst\u00a0BlogPostTemplate\u00a0=\u00a0({\u00a0data\u00a0})\u00a0=&gt;\u00a0(\r\n\u00a0\u00a0&lt;Layout&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;SEO\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title={data.wordpressPost.title}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0description={data.wordpressPost.excerpt}\r\n\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;h1&gt;{data.wordpressPost.title}&lt;\/h1&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{data.wordpressPost.date}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;span&gt;{data.wordpressPost.categories[0].name}&lt;\/span&gt;\r\n\u00a0\u00a0\u00a0\u00a0{data.wordpressPost.featured_media\u00a0&amp;&amp;\u00a0(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Img\u00a0fluid={data.wordpressPost.featured_media.localFile.childImageSharp.fluid}\u00a0\/&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0)}\r\n\u00a0\u00a0\u00a0\u00a0&lt;div\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dangerouslySetInnerHTML={{\u00a0__html:\u00a0data.wordpressPost.content\u00a0}}\r\n\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\u00a0\u00a0&lt;\/Layout&gt;\r\n)\r\nexport\u00a0default\u00a0BlogPostTemplate\r\n\r\nexport\u00a0const\u00a0query\u00a0=\u00a0graphql`\r\n\u00a0\u00a0query($id:\u00a0Int!)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0wordpressPost(wordpress_id:\u00a0{\u00a0eq:\u00a0$id\u00a0})\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date(formatString:\u00a0&quot;YYYY.MM.DD&quot;)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featured_media\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localFile\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0childImageSharp\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fluid(maxWidth:\u00a01000)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...GatsbyImageSharpFluid\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n`<\/code>\r\n<\/pre>\n<\/div>\n<p>\u3053\u308c\u3067\u3053\u3093\u306a\u611f\u3058\u306b\u8868\u793a\u3055\u308c\u305f\u304b\u3068\u601d\u3044\u307e\u3059<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-8.png\" alt=\"\" width=\"2880\" height=\"1800\" class=\"alignnone size-full wp-image-133\" srcset=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-8.png 2880w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-8-300x188.png 300w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-8-768x480.png 768w, https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-content\/uploads\/2019\/10\/gatsby-wp-rest-api-3-8-1024x640.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u7c21\u5358\u3067\u3059\u306d^ ^<\/p>\n<p>\u304a\u75b2\u308c\u69d8\u3067\u3057\u305f\uff01<\/p>\n<p>\u3053\u308c\u3067\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u7de8\u306f\u7d42\u308f\u308a\u3067\u3059<\/p>\n<p>\u30c7\u30fc\u30bf\u3092\u5f15\u3063\u5f35\u3063\u3066\u304f\u308b\u65b9\u6cd5\u304c\u308f\u304b\u308a\u3055\u3048\u3059\u308c\u3070\u3001Gatsby\u306f\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3057\u7c21\u5358\u3067\u3059\u3088\u306d^ ^<\/p>\n<p>\u6b21\u56de\u306f\u8a18\u4e8b\u30da\u30fc\u30b8\u306e\u300cbreadcrumbs\u300d\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3059^ ^<\/p>\n<p>\u3067\u306f\u301c\u301c<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306fGatsby\u9023\u8f09\u306e#3\u300c\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u4f5c\u308a\u65b9\u300d\u7de8\u3067\u3059^ ^ STEPS Step\uff11\uff1aWordPress\u5074\u3067\u8a18\u4e8b\u306b\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u8ffd\u52a0 Step\uff12\uff1a\u8a18\u4e8b\u306e\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u5168\u90e8\u53d6\u5f97\u3059\u308b Step\uff13\uff1a\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u306e\u30c6\u30f3\u30d7&hellip; <a class=\"more-link\" href=\"https:\/\/taroken.mixh.jp\/wp\/gatsby\/gatsby-wordpress-rest-api-3\/\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">#3 Gatsby + WordPress REST API\u3067\u30d6\u30ed\u30b0\u3092\u4f5c\u308d\u3046\u3010\u30ab\u30c6\u30b4\u30ea\u30fc\u30da\u30fc\u30b8\u7de8\u3011<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[10,7,9,11,8],"_links":{"self":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/123"}],"collection":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":11,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":142,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/posts\/123\/revisions\/142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/media\/107"}],"wp:attachment":[{"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taroken.mixh.jp\/wp\/gatsby\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}