Full render

gatsby-node.js

@@ -4,7 +4,7 @@ const { createPages } = require('@prismicio/gatsby-source-prismic-graphql')
 exports.createPages = createPages(async ({ graphql, actions }) => {
   const { createPrismicPage } = actions
 
-  const homepage = graphql(`
+  const homepage = await graphql(`
     {
       prismic{
         allHomepages(uid:null){
@@ -98,22 +98,221 @@ exports.createPages = createPages(async ({ graphql, actions }) => {
         }
       }
     }
-  `).then(result => {
-    if (result.errors) {
-      Promise.reject(result.errors)
+  `)
+  if (homepage.errors) {
+    Promise.reject(homepage.errors)
+  }
+
+  homepage.data.prismic.allHomepages.edges.forEach(({ node }) => {
+    createPrismicPage({
+      pattern: `/`,
+      component: path.resolve(`./src/templates/homepage.js`),
+      context: {
+        data: node
+      },
+    })
+  })
+
+  const products = await graphql(`
+  {
+    prismic{
+      allProducts{
+        edges{
+          node{
+            _meta{
+              type
+              id
+              uid
+            }
+            product_name
+            product_image
+            sub_title
+            rich_content
+            button_link{
+              __typename
+              ... on PRISMIC__ExternalLink{
+                url
+              }
+            }
+            button_label
+            title
+            product_description
+            related_products_title
+            related_products{
+              product1{
+                __typename
+                ... on PRISMIC_Product{
+                  product_image
+                  product_name
+                  sub_title
+                  _meta{
+                    uid
+                    id
+                    type
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
-
-    result.data.prismic.allHomepages.edges.forEach(({ node }) => {
-      createPrismicPage({
-        pattern: `/`,
-        component: path.resolve(`./src/templates/homepage.js`),
-        context: {
-          data: node
-        },
-      })
+  }
+  `)
+  if(products.errors) {
+    Promise.reject(products.errors)
+  }
+
+  products.data.prismic.allProducts.edges.forEach(({ node }) => {
+    createPrismicPage({
+      pattern: `/products/:uid`,
+      params: {
+        uid: node._meta.uid
+      },
+      component: path.resolve(`./src/templates/product.js`),
+      context: {
+        data: node
+      }
+    })
+  })
+
+  const productHome = await graphql(`
+  {
+    prismic{
+      allProductss(uid:null){
+        edges{
+          node{
+            title
+            meta_title
+            meta_description
+            _meta{
+              uid
+              id
+              type
+            }
+          }
+        }
+      }
+      allProducts{
+        edges{
+          node{
+            _meta{
+              type
+              id
+              uid
+            }
+            product_name
+            product_image
+            sub_title
+          }
+        }
+      }
+    }
+  }
+  `)
+  if(productHome.errors) {
+    Promise.reject(productHome.errors)
+  }
+
+  productHome.data.prismic.allProductss.edges.forEach(({ node }) => {
+    createPrismicPage({
+      pattern: `/products/`,
+      component: path.resolve(`./src/templates/productsHome.js`),
+      context: {
+        data: node,
+        extra: productHome.data.prismic.allProducts.edges
+      }
+    })
+  })
+
+  const blogPosts = await graphql(`
+    {
+      prismic{
+        allBlog_posts{
+          edges{
+            node{
+              _meta{
+                uid
+                id
+              }
+              author{
+                _linkType
+                ... on PRISMIC_Author{
+                  name
+                  bio
+                  picture
+                }
+              }
+              image
+              title
+              rich_content
+            }
+          }
+        }
+      }
+    }
+  `)
+  if(blogPosts.error) {
+    Promise.reject(blogPosts.error)
+  }
+
+  blogPosts.data.prismic.allBlog_posts.edges.forEach(({ node }) => {
+    createPrismicPage({
+      pattern: `/blog/:uid`,
+      params: {
+        uid: node._meta.uid
+      },
+      component: path.resolve(`./src/templates/blogPost.js`),
+      context: {
+        data: node
+      }
+    })
+  })
+
+  const blogHome = await graphql(`
+    {
+      prismic{
+        allBlog_homes(uid:null){
+          edges{
+            node{
+              _meta{
+                uid
+                id
+                type
+              }
+            }
+          }
+        }
+        allBlog_posts{
+          edges{
+            node{
+              _meta{
+                uid
+                id
+                type
+              }
+              title
+              image
+              rich_content        
+            }
+          }
+        }
+      }
+    }
+  `)
+  if (blogHome.errors) {
+    Promise.reject(blogHome.errors)
+  }
+
+  blogHome.data.prismic.allBlog_homes.edges.forEach(({ node }) => {
+    createPrismicPage({
+      pattern: `/blog/`,
+      component: path.resolve(`./src/templates/blogHome.js`),
+      context: {
+        data: node,
+        extra: blogHome.data.prismic.allBlog_posts.edges
+      }
     })
   })
-
 
-  return Promise.all([homepage])
-})
+})

src/templates/blogHome.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import { RichText } from 'prismic-reactjs'
+import { linkResolver } from '../utils/linkResolver'
+import { withPreview } from '@prismicio/gatsby-source-prismic-graphql'
+import { Link } from 'gatsby'
+import Layout from '../components/layouts'
+
+class BlogHome extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      doc: this.props.pageContext.data,
+      posts: this.props.pageContext.extra
+    }
+  }
+
+  renderPosts() {
+    return this.state.posts.map((item) =>
+      <div key={item.node._meta.uid} className="blog-home-post-wrapper">
+        <article>
+          <img className="blog-home-post-image" src={item.node.image.url} alt={item.node.image.alt} />
+          <p className="blog-home-post-title">
+            {RichText.asText(item.node.title)}
+          </p>
+          <p className="blog-home-post-excerpt">
+            {RichText.asText(item.node.rich_content).substring(0, 158)} …
+          </p>
+          <div className="blog-home-post-button-wrapper">
+            <Link className="a-button" to={linkResolver(item.node._meta)}>
+              Read post
+            </Link>
+          </div>
+        </article>
+      </div>
+    )
+  }
+
+  renderBody() {
+    return (
+      <React.Fragment>
+        <div className="l-wrapper">
+          <hr className="separator-hr" />
+        </div>
+
+        <section className="blog-home-section">
+          <div className="blog-home-posts-wrapper">
+            {this.renderPosts()}
+          </div>
+        </section>
+
+        <div data-wio-id={this.state.doc._meta.id}></div>
+      </React.Fragment>
+    )
+  }
+
+  render() {
+    return (
+      <Layout>
+        {this.renderBody()}
+      </Layout>
+    );
+  }
+}
+
+export default withPreview(BlogHome)