Merge pull request #63 from WebDevStudios/feature/33-homepage

Feature/33 homepage

Author: Greg Rickaby

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -45,16 +45,19 @@ export default async function getPostTypeStaticPaths(postType) {
   // Process paths.
   const paths = !posts?.data?.[pluralName]?.edges
     ? []
-    : posts.data[pluralName].edges.map((post) => {
-        // Trim leading and trailing slashes then split into array on inner slashes.
-        const slug = post.node[pathField].replace(/^\/|\/$/g, '').split('/')
+    : posts.data[pluralName].edges
+        .map((post) => {
+          // Trim leading and trailing slashes then split into array on inner slashes.
+          const slug = post.node[pathField].replace(/^\/|\/$/g, '').split('/')
 
-        return {
-          params: {
-            slug
+          return {
+            params: {
+              slug
+            }
           }
-        }
-      })
+        })
+        // Filter out certain posts with custom routes (e.g., homepage).
+        .filter((post) => !!post.params.slug.join('/').length)
 
   return {
     paths,

api/wordpress/_global/getPostTypeStaticProps.js

@@ -45,13 +45,22 @@ export default async function getPostTypeStaticProps(
     slug
   )
 
+  const props = {
+    post,
+    error,
+    errorMessage
+  }
+
+  // Custom handling for homepage.
+  if (error) {
+    // Fallback to empty props if homepage not set in WP.
+    props.post = null
+    props.error = false
+  }
+
   // Merge in query results as Apollo state.
   return addApolloState(apolloClient, {
-    props: {
-      post,
-      error,
-      errorMessage
-    },
+    props,
     revalidate: 60 * 5
   })
 }

api/wordpress/pages/queryHomepage.js

@@ -0,0 +1,16 @@
+const {gql} = require('@apollo/client')
+const {singlePageFragment} = require('./queryPageById')
+
+// Query: retrieve homepage.
+const queryHomepage = gql`
+  query GET_HOMEPAGE($imageSize: MediaItemSizeEnum = LARGE) {
+    homepageSettings {
+      frontPage {
+        ...SinglePageFields
+      }
+    }
+  }
+  ${singlePageFragment}
+`
+
+export default queryHomepage

api/wordpress/pages/queryPageById.js

@@ -6,7 +6,7 @@ import featuredImagePostFields from '../_partials/featuredImagePostFields'
 const {gql} = require('@apollo/client')
 
 // Fragment: retrieve single page fields.
-const singlePageFragment = gql`
+export const singlePageFragment = gql`
   fragment SinglePageFields on Page {
     ${globalPostFields}
     blocksJSON

pages/index.js

@@ -1,8 +1,27 @@
+import PropTypes from 'prop-types'
 import Layout from '@/components/common/Layout'
 import Hero from '@/components/molecules/Hero'
+import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
+import Page from './[...slug]'
 import {NextSeo} from 'next-seo'
 
-export default function HomePage() {
+// Define route post type.
+const postType = 'page'
+
+/**
+ * The HomePage component displays the home page via dynamic routing.
+ *
+ * @author WebDevStudios
+ * @param  {Object} [props] Properties passed to the component.
+ * @return {Element}        Element to render.
+ */
+export default function HomePage({post}) {
+  // Display dynamic page data if homepage retrieved from WP.
+  if (post) {
+    return <Page post={post} />
+  }
+
+  // Display static page content as fallback.
   return (
     <Layout>
       <NextSeo
@@ -24,6 +43,26 @@ export default function HomePage() {
         title="Next.js Starter"
         description="A slightly opinionated, yet bare-bones Next.js starter."
       />
+      <p>
+        To display your WordPress homepage dynamically, set your homepage to a
+        static page via the WP dashboard (Settings: Reading Settings).
+      </p>
     </Layout>
   )
 }
+
+/**
+ * Get post static props.
+ *
+ * @param  {Object}  context             Context for current post.
+ * @param  {boolean} context.preview     Whether requesting preview of post.
+ * @param  {Object}  context.previewData Post preview data.
+ * @return {Object}                      Post props.
+ */
+export async function getStaticProps() {
+  return await getPostTypeStaticProps({slug: '/'}, postType)
+}
+
+HomePage.propTypes = {
+  post: PropTypes.object
+}