#931 - Previews on CPT

functions/wordpress/postTypes/getPostTypeById.js

@@ -1,6 +1,7 @@
 import isHierarchicalPostType from '@/functions/wordpress/postTypes/isHierarchicalPostType'
 import processPostTypeQuery from '@/functions/wordpress/postTypes/processPostTypeQuery'
 import queryPageById from '@/lib/wordpress/pages/queryPageById'
+import constructCPTQuery from '@/lib/wordpress/posts/queryCPTById'
 import queryPostById from '@/lib/wordpress/posts/queryPostById'
 
 /**
@@ -20,14 +21,18 @@ export default async function getPostTypeById(
   preview = null
 ) {
   // Define single post query based on post type.
-  const postTypeQuery = {
+  let postTypeQuery = {
     page: queryPageById,
     post: queryPostById
   }
 
   // Check if post type is hierarchical.
   const isHierarchical = isHierarchicalPostType(postType)
 
+  if (!isHierarchical) {
+    postTypeQuery[postType] = constructCPTQuery(postType)
+  }
+
   // Fix default ID type for hierarchical posts.
   idType = !isHierarchical || 'SLUG' !== idType ? idType : 'URI'
 

functions/wordpress/postTypes/getPostTypeStaticProps.js

@@ -150,7 +150,6 @@ export default async function getPostTypeStaticProps(
 
   // Get post identifier (ID or slug).
   const postId = Number.isInteger(Number(slug)) ? Number(slug) : slug
-
   // Check if preview mode is active and valid for current post (preview and post IDs or slugs match).
   const isCurrentPostPreview =
     preview &&

lib/wordpress/posts/queryCPTById.js

@@ -0,0 +1,52 @@
+import categoriesPostFields from '@/lib/wordpress/_query-partials/categoriesPostFields'
+import commentsPostFields from '@/lib/wordpress/_query-partials/commentsPostFields'
+import defaultPageData from '@/lib/wordpress/_query-partials/defaultPageData'
+import tagsPostFields from '@/lib/wordpress/_query-partials/tagsPostFields'
+import {gql} from '@apollo/client'
+
+// Query: retrieve post by specified identifier.
+
+/**
+ * Function used to contruct an Apollo query based on CPT.
+ *
+ * @param  {string} postType The post type to return.
+ * @return {string}          Returns the Apollo gql query.
+ */
+export default function constructCPTQuery(postType) {
+  const queryCPTById = gql`
+  query CPT_QUERY($id: ID!) {
+    ${defaultPageData}
+    ${postType}(id: $id, idType: DATABASE_ID) {
+      blocksJSON
+      databaseId
+      date
+      slug
+      uri
+      title
+      status
+      featuredImage {
+        node {
+          altText
+          sourceUrl
+          databaseId
+          parentId
+        }
+      }
+      seo {
+        breadcrumbs {
+          text
+          url
+        }
+        fullHead
+        metaRobotsNofollow
+        metaRobotsNoindex
+        title
+      }
+    }
+    ${tagsPostFields}
+    ${categoriesPostFields}
+    ${commentsPostFields}
+  }
+`
+  return queryCPTById
+}

pages/api/preview.js

@@ -1,6 +1,5 @@
 import getPostTypeById from '@/functions/wordpress/postTypes/getPostTypeById'
 import {wpPreviewSecret} from '@/lib/wordpress/connector'
-import {postTypes} from '@/lib/wordpress/_config/postTypes'
 
 /**
  * Provide post preview functionality.
@@ -41,23 +40,24 @@ export default async function preview(req, res) {
       throw new Error(errorMessage)
     }
 
-    // Set page preview data and enable preview mode.
-    res.setPreviewData({
+    const previewData = {
       post: {
         id: post.databaseId,
         slug: post.slug,
         status: post.status,
-        uri: post.uri
+        uri: post.uri,
+        postType: postType
       }
-    })
+    }
 
-    const baseRoute = postTypes?.[postType]?.route ?? ''
+    // Set page preview data and enable preview mode.
+    res.setPreviewData(previewData)
 
     // Redirect to post dynamic route.
     res.redirect(
       post.slug && post.uri && post.uri.indexOf('?page_id=') === -1
         ? post.uri
-        : `${baseRoute ? `/${baseRoute}` : ''}/${post.databaseId}`
+        : `../../../preview/${post.databaseId}`
     )
   } catch (error) {
     return res.status(error?.status || 401).json({

pages/preview/[...slug].js

@@ -0,0 +1,105 @@
+import Container from '@/components/atoms/Container'
+import RichText from '@/components/atoms/RichText'
+import Layout from '@/components/common/Layout'
+import Blocks from '@/components/molecules/Blocks'
+import Archive from '@/components/organisms/Archive'
+import getPagePropTypes from '@/functions/getPagePropTypes'
+import getPostTypeStaticPaths from '@/functions/wordpress/postTypes/getPostTypeStaticPaths'
+import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
+import {PropTypes} from 'prop-types'
+
+/**
+ * Render the Page component.
+ *
+ * @author WebDevStudios
+ * @param  {object}  props             The component attributes as props.
+ * @param  {boolean} props.archive     Whether displaying single post (false) or archive (true).
+ * @param  {boolean} props.dateArchive Whether displaying single post (false) or date-based archive (true).
+ * @param  {string}  props.day         Date query: day.
+ * @param  {string}  props.month       Date query: month.
+ * @param  {object}  props.pagination  Archive pagination data from WordPress.
+ * @param  {object}  props.post        Post data from WordPress.
+ * @param  {Array}   props.posts       Array of post data from WordPress.
+ * @param  {string}  props.year        Date query: year.
+ * @return {Element}                   The Page component.
+ */
+export default function Page({
+  archive,
+  dateArchive,
+  day,
+  month,
+  pagination,
+  post,
+  posts,
+  year
+}) {
+  if (archive) {
+    return (
+      <Layout seo={{...post?.seo}}>
+        <Container>
+          <Archive posts={posts} postType="post" pagination={pagination} />
+        </Container>
+      </Layout>
+    )
+  } else if (dateArchive) {
+    return (
+      <Layout seo={{...post?.seo}}>
+        <Container>
+          <RichText tag="h1">{post?.title}</RichText>
+          <Archive
+            date={{
+              day,
+              month,
+              year
+            }}
+            posts={posts}
+            postType="post"
+            pagination={pagination}
+          />
+        </Container>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout seo={{...post?.seo}}>
+      <Container>
+        <article className="innerWrap">
+          <RichText tag="h1">{post?.title}</RichText>
+          <Blocks blocks={post?.blocks} />
+        </article>
+      </Container>
+    </Layout>
+  )
+}
+
+/**
+ * Get post static paths.
+ *
+ * @author WebDevStudios
+ * @return {object} Object consisting of array of paths and fallback setting.
+ */
+export async function getStaticPaths() {
+  return await getPostTypeStaticPaths('page')
+}
+
+/**
+ * Get post static props.
+ *
+ * @author WebDevStudios
+ * @param  {object} context Context for current post.
+ * @return {object}         Post props.
+ */
+export async function getStaticProps(context) {
+  const {params, preview, previewData} = context
+  const pT = preview ? previewData?.post?.postType : null
+  return getPostTypeStaticProps(params, pT, preview, previewData)
+}
+
+Page.propTypes = {
+  ...getPagePropTypes('page'),
+  dateArchive: PropTypes.bool,
+  day: PropTypes.string,
+  month: PropTypes.string,
+  year: PropTypes.string
+}