git Merge branch 'feature/45-input-error-component' of github.com:WebDevStudios/nextjs-wordpress-starter into feature/45-input-error-component

Author: Mike England

api/wordpress/_global/getFrontendPage.js

@@ -0,0 +1,59 @@
+import queryDefaultSeo from '../_global/queryDefaultSeo'
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
+import {initializeWpApollo} from '../connector'
+
+// Define SEO for Frontend routes.
+export const frontendPageSeo = {
+  search: {
+    title: 'Search',
+    description: 'Search page'
+  }
+}
+
+/**
+ * Retrieve data for Frontend-only route (i.e., page does not exist in WordPress).
+ *
+ * @author WebDevStudios
+ * @param {string} route Frontend route.
+ * @return {object}      Object containing Apollo client instance and post data or error object.
+ */
+export default async function getFrontendPage(route) {
+  // Get/create Apollo instance.
+  const apolloClient = initializeWpApollo()
+
+  // Set up return object.
+  const response = {
+    apolloClient,
+    error: false,
+    errorMessage: null
+  }
+
+  // Execute query.
+  response.post = await apolloClient
+    .query({query: queryDefaultSeo})
+    .then((res) => {
+      const {homepageSettings, siteSeo} = res.data
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
+      // Set route SEO.
+      return {
+        seo: {
+          title: `${frontendPageSeo?.[route]?.title} - ${
+            response.defaultSeo?.openGraph?.siteName ?? ''
+          }`,
+          metaDesc: frontendPageSeo?.[route]?.description,
+          canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${route}`
+        }
+      }
+    })
+    .catch((error) => {
+      response.error = true
+      response.errorMessage = error.message
+
+      return null
+    })
+
+  return response
+}

api/wordpress/_global/getPostTypeArchive.js

@@ -7,6 +7,46 @@ import queryServicesArchive from '../services/queryServicesArchive'
 import queryTeamsArchive from '../teams/queryTeamsArchive'
 import queryPortfoliosArchive from '../portfolios/queryPortfoliosArchive'
 import queryTestimonialsArchive from '../testimonials/queryTestimonialsArchive'
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
+
+// Define SEO for archives.
+export const archiveSeo = {
+  career: {
+    title: 'Careers',
+    description: '',
+    route: 'careers'
+  },
+  event: {
+    title: 'Events',
+    description: '',
+    route: 'events'
+  },
+  portfolio: {
+    title: 'Portfolio',
+    description: '',
+    route: 'portfolio'
+  },
+  post: {
+    title: 'Blog',
+    description: '',
+    route: 'blog'
+  },
+  service: {
+    title: 'Services',
+    description: '',
+    route: 'service'
+  },
+  team: {
+    title: 'Team Members',
+    description: '',
+    route: 'team'
+  },
+  testimonial: {
+    title: 'Testimonials',
+    description: '',
+    route: 'testimonial'
+  }
+}
 
 /**
  * Retrieve post archive.
@@ -77,8 +117,13 @@ export default async function getPostTypeArchive(
   await apolloClient
     .query({query, variables})
     .then((archive) => {
+      const {homepageSettings, siteSeo, ...archiveData} = archive.data
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
       const pluralType = postTypes[postType] ?? postType
-      const data = archive?.data?.[pluralType] ?? null
+      const data = archiveData?.[pluralType] ?? null
 
       // Set error props if data not found.
       if (!data?.edges || !data?.pageInfo) {
@@ -91,6 +136,29 @@ export default async function getPostTypeArchive(
       // Flatten posts array to include inner node post data.
       response.posts = data.edges.map((post) => post.node)
 
+      // Attempt to use posts page for blog, default to custom SEO.
+      response.post = {
+        seo:
+          'post' === postType && homepageSettings?.postsPage?.seo
+            ? {
+                ...homepageSettings.postsPage.seo,
+                canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
+                  archiveSeo?.[postType]?.route
+                }`
+              }
+            : {
+                title: `${archiveSeo?.[postType]?.title} - ${
+                  response.defaultSeo?.openGraph?.siteName ?? ''
+                }`,
+                metaDesc: archiveSeo?.[postType]?.description,
+                canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
+                  archiveSeo?.[postType]?.route
+                }`,
+                metaRobotsNofollow: 'follow',
+                metaRobotsNoindex: 'index'
+              }
+      }
+
       // Extract pagination data.
       response.pagination = data.pageInfo
     })

api/wordpress/_global/getPostTypeById.js

@@ -9,6 +9,7 @@ import queryServiceById from '../services/queryServiceById'
 import queryTeamById from '../teams/queryTeamById'
 import queryPortfolioById from '../portfolios/queryPortfolioById'
 import queryTestimonialById from '../testimonials/queryTestimonialById'
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
 
 /**
  * Retrieve single post by specified identifier.
@@ -63,29 +64,42 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   // Execute query.
   response.post = await apolloClient
     .query({query, variables: {id, idType}})
-    .then((post) => {
+    .then((res) => {
+      const {homepageSettings, siteSeo, ...postData} = res.data
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
+      const post = postData?.[postType]
+
       // Set error props if data not found.
-      if (!post?.data?.[postType]) {
+      if (!post) {
         response.error = true
         response.errorMessage = `An error occurred while trying to retrieve data for ${postType} "${id}."`
 
         return null
       }
 
-      return post.data[postType]
+      return post
     })
     .then(async (post) => {
+      // Add slug/ID to post.
+      const newPost = {
+        ...post,
+        slug: id
+      }
+
       // Handle blocks.
       if (!post || !post?.blocksJSON) {
         return post
       }
 
-      const newPost = {...post}
-
       newPost.blocks = await formatBlockData(
         JSON.parse(newPost.blocksJSON) ?? []
       )
 
+      delete newPost.blocksJSON
+
       return newPost
     })
     .catch((error) => {

api/wordpress/_global/getPostTypeStaticProps.js

@@ -4,6 +4,7 @@ import getPostTypeArchive from './getPostTypeArchive'
 import {addApolloState} from '@/api/apolloConfig'
 import getMenus from '@/api/wordpress/menus/getMenus'
 import config from '@/functions/config'
+import getFrontendPage, {frontendPageSeo} from './getFrontendPage'
 
 /**
  * Retrieve static props by post type.
@@ -22,25 +23,42 @@ export default async function getPostTypeStaticProps(
   // Get WP Nav Menus.
   const menus = await getMenus(config.menuLocations)
 
-  // Check for dynamic archive display.
-  if (!Object.keys(params).length) {
-    const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
+  // Set revalidate length (seconds).
+  const revalidate = 60 * 5
 
-    // Add WP Nav Menus to archive.
-    archiveData.menus = menus
-
-    // Add Algolia env vars to archive.
-    archiveData.algolia = {
+  // Set sharedProps.
+  const sharedProps = {
+    menus,
+    algolia: {
       indexName: algoliaIndexName
     }
+  }
+
+  // Check for Frontend-only routes.
+  if (Object.keys(frontendPageSeo).includes(postType)) {
+    const {apolloClient, ...routeData} = await getFrontendPage(postType)
+
+    return addApolloState(apolloClient, {
+      props: {
+        ...routeData,
+        ...sharedProps
+      },
+      revalidate
+    })
+  }
+
+  // Check for dynamic archive display.
+  if (!Object.keys(params).length) {
+    const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
 
     // Merge in query results as Apollo state.
     return addApolloState(apolloClient, {
       props: {
         ...archiveData,
+        ...sharedProps,
         archive: true
       },
-      revalidate: 60 * 5
+      revalidate
     })
   }
 
@@ -53,26 +71,22 @@ export default async function getPostTypeStaticProps(
     slug
   )
 
-  const props = {...postData, error}
+  const props = {
+    ...postData,
+    ...sharedProps,
+    error
+  }
 
   // Custom handling for homepage.
-  if (error) {
+  if ('/' === slug && error) {
     // Fallback to empty props if homepage not set in WP.
     props.post = null
     props.error = false
   }
 
-  // Set WP Nav Menus.
-  props.menus = menus
-
-  // Add Algolia env vars.
-  props.algolia = {
-    indexName: algoliaIndexName
-  }
-
   // Merge in query results as Apollo state.
   return addApolloState(apolloClient, {
     props,
-    revalidate: 60 * 5
+    revalidate
   })
 }

api/wordpress/_global/queryDefaultSeo.js

@@ -0,0 +1,11 @@
+import {gql} from '@apollo/client'
+import defaultSeoFields from '../_partials/defaultSeoFields'
+
+// Query: retrieve default SEO data.
+const queryDefaultSeo = gql`
+  query GET_DEFAULT_SEO {
+    ${defaultSeoFields}
+  }
+`
+
+export default queryDefaultSeo

api/wordpress/_partials/defaultSeoFields.js

@@ -0,0 +1,50 @@
+const {default: seoPostFields} = require('./seoPostFields')
+
+// Query partial: retrieve homepage & site SEO fields.
+const defaultSeoFields = `
+homepageSettings {
+  frontPage {
+    ${seoPostFields}
+  }
+}
+siteSeo: seo {
+  schema {
+    siteName
+    siteUrl
+  }
+  openGraph {
+    defaultImage {
+      altText
+      sourceUrl(size: THUMBNAIL)
+    }
+  }
+  social {
+    facebook {
+      url
+    }
+    instagram {
+      url
+    }
+    linkedIn {
+      url
+    }
+    mySpace {
+      url
+    }
+    pinterest {
+      url
+    }
+    twitter {
+      username
+    }
+    wikipedia {
+      url
+    }
+    youTube {
+      url
+    }
+  }
+}
+`
+
+export default defaultSeoFields

api/wordpress/_partials/seoPostFields.js

@@ -6,8 +6,12 @@ const seoPostFields = `
     metaDesc
     metaRobotsNofollow
     metaRobotsNoindex
+    opengraphAuthor
+    opengraphModifiedTime
+    opengraphPublishedTime
     opengraphImage {
-      sourceUrl
+      altText
+      sourceUrl(size: THUMBNAIL)
     }
   }
 `

api/wordpress/careers/queryCareerById.js

@@ -2,6 +2,7 @@ import globalPostFields from '../_partials/globalPostFields'
 import seoPostFields from '../_partials/seoPostFields'
 import featuredImagePostFields from '../_partials/featuredImagePostFields'
 import {gql} from '@apollo/client'
+import defaultSeoFields from '../_partials/defaultSeoFields'
 
 // Fragment: retrieve single career fields.
 const singleCareerFragment = gql`
@@ -21,6 +22,7 @@ const queryCareerById = gql`
     $idType: CareerIdType = SLUG
     $imageSize: MediaItemSizeEnum = LARGE
   ) {
+    ${defaultSeoFields}
     career(id: $id, idType: $idType) {
       ...SingleCareerFields
     }