Merge branch 'staging' of https://github.com/WebDevStudios/nextjs-wordpress-starter into feature/component-handling

Author: dcooney

api/wordpress/_global/getPostTypeArchive.js

@@ -14,38 +14,31 @@ import getMenus from '../menus/getMenus'
 export const archiveSeo = {
   career: {
     title: 'Careers',
-    description: '',
-    route: 'careers'
+    description: ''
   },
   event: {
     title: 'Events',
-    description: '',
-    route: 'events'
+    description: ''
   },
   portfolio: {
     title: 'Portfolio',
-    description: '',
-    route: 'portfolio'
+    description: ''
   },
   post: {
     title: 'Blog',
-    description: '',
-    route: 'blog'
+    description: ''
   },
   service: {
     title: 'Services',
-    description: '',
-    route: 'service'
+    description: ''
   },
   team: {
     title: 'Team Members',
-    description: '',
-    route: 'team'
+    description: ''
   },
   testimonial: {
     title: 'Testimonials',
-    description: '',
-    route: 'testimonial'
+    description: ''
   }
 }
 
@@ -59,7 +52,7 @@ export const archiveSeo = {
  * @param {string}  cursor   Start/end cursor for pagination.
  * @param {boolean} getNext  Whether to retrieve next set of posts (true) or previous set (false).
  * @param {number}  perPage  Number of posts per page.
- * @return {object}          Object containing Apollo client instance and post archive data or error object.
+ * @return {object} Object containing Apollo client instance and post archive data or error object.
  */
 export default async function getPostTypeArchive(
   postType,
@@ -126,7 +119,7 @@ export default async function getPostTypeArchive(
       // Retrieve default SEO data.
       response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
 
-      const pluralType = postTypes[postType] ?? postType
+      const pluralType = postTypes[postType]?.pluralName ?? postType
       const data = archiveData?.[pluralType] ?? null
 
       // Set error props if data not found.
@@ -147,7 +140,7 @@ export default async function getPostTypeArchive(
             ? {
                 ...homepageSettings.postsPage.seo,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`
               }
             : {
@@ -156,7 +149,7 @@ export default async function getPostTypeArchive(
                 }`,
                 metaDesc: archiveSeo?.[postType]?.description,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`,
                 metaRobotsNofollow: 'follow',
                 metaRobotsNoindex: 'index'

api/wordpress/_global/getPostTypeById.js

@@ -1,5 +1,5 @@
 import queryPostById from '../posts/queryPostById'
-import {initializeWpApollo} from '../connector'
+import {initializeWpApollo, createWpApolloClient} from '../connector'
 import queryPageById from '../pages/queryPageById'
 import {isHierarchicalPostType} from './postTypes'
 import formatBlockData from '@/functions/formatBlockData'
@@ -19,9 +19,15 @@ import getMenus from '../menus/getMenus'
  * @param {string}          postType WP post type.
  * @param {number | string} id       Post identifier.
  * @param {string}          idType   Type of ID.
- * @return {object}                  Object containing Apollo client instance and post data or error object.
+ * @param {string}          preview  Whether query is for a regular post view (null), a preview check (basic), or full post preview (full).
+ * @return {object} Object containing Apollo client instance and post data or error object.
  */
-export default async function getPostTypeById(postType, id, idType = 'SLUG') {
+export default async function getPostTypeById(
+  postType,
+  id,
+  idType = 'SLUG',
+  preview = null
+) {
   // Define single post query based on post type.
   const postTypeQuery = {
     career: queryCareerById,
@@ -44,7 +50,9 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   const query = postTypeQuery?.[postType] ?? null
 
   // Get/create Apollo instance.
-  const apolloClient = initializeWpApollo()
+  const apolloClient = preview
+    ? createWpApolloClient(true)
+    : initializeWpApollo()
 
   // Set up return object.
   const response = {
@@ -93,11 +101,11 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
         slug: id
       }
 
-      // Handle blocks.
-      if (!post || !post?.blocksJSON) {
+      if ('basic' === preview || !post || !post?.blocksJSON) {
         return post
       }
 
+      // Handle blocks.
       newPost.blocks = await formatBlockData(
         JSON.parse(newPost.blocksJSON) ?? []
       )

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -7,15 +7,15 @@ import {initializeWpApollo} from '../connector'
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {object}         Post type paths.
+ * @return {object} Post type paths.
  */
 export default async function getPostTypeStaticPaths(postType) {
   if (!postType || !isValidPostType(postType)) {
     return null
   }
 
   // Retrieve post type plural name.
-  const pluralName = postTypes[postType]
+  const pluralName = postTypes[postType].pluralName
 
   // Check if post type is hierarchical.
   const isHierarchical = isHierarchicalPostType(postType)

api/wordpress/_global/getPostTypeStaticProps.js

@@ -8,15 +8,17 @@ import getFrontendPage, {frontendPageSeo} from './getFrontendPage'
  * Retrieve static props by post type.
  *
  * @author WebDevStudios
- * @param {string} params   Post params (e.g., slug).
- * @param {string} postType Post Type.
- * @return {object}         Object containing post props and revalidate setting.
+ * @param {string}  params      Post params (e.g., slug).
+ * @param {string}  postType    Post Type.
+ * @param {boolean} preview     Whether requesting preview of post.
+ * @param {object}  previewData Post preview data.
+ * @return {object} Object containing post props and revalidate setting.
  */
 export default async function getPostTypeStaticProps(
   params,
-  postType
-  // preview = false, // TODO - add preview handling.
-  // previewData = null
+  postType,
+  preview = false,
+  previewData = null
 ) {
   // Set revalidate length (seconds).
   const revalidate = 60 * 5
@@ -28,7 +30,7 @@ export default async function getPostTypeStaticProps(
     }
   }
 
-  // Check for Frontend-only routes.
+  /* -- Handle Frontend-only routes. -- */
   if (Object.keys(frontendPageSeo).includes(postType)) {
     const {apolloClient, ...routeData} = await getFrontendPage(postType)
 
@@ -41,7 +43,7 @@ export default async function getPostTypeStaticProps(
     })
   }
 
-  // Check for dynamic archive display.
+  /* -- Handle dynamic archive display. -- */
   if (!Object.keys(params).length) {
     const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
 
@@ -56,24 +58,43 @@ export default async function getPostTypeStaticProps(
     })
   }
 
+  /* -- Handle individual posts. -- */
+
   // Handle catch-all routes.
   const slug = Array.isArray(params.slug) ? params.slug.join('/') : params.slug
 
+  // 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 &&
+    (postId === previewData?.post?.id || postId === previewData?.post?.slug)
+
+  // Check if viewing a draft post.
+  const isDraft = isCurrentPostPreview && 'draft' === previewData?.post?.status
+
+  // Set query variables.
+  const id = isDraft ? previewData.post.id : slug
+  const idType = isDraft ? 'DATABASE_ID' : 'SLUG'
+
   // Retrieve post data.
   const {apolloClient, error, ...postData} = await getPostTypeById(
     postType,
-    slug
+    id,
+    idType,
+    isCurrentPostPreview ? 'full' : null
   )
 
   const props = {
     ...postData,
     ...sharedProps,
-    error
+    error,
+    preview: isCurrentPostPreview
   }
 
-  // Custom handling for homepage.
+  // Fallback to empty props if homepage not set in WP.
   if ('/' === slug && error) {
-    // Fallback to empty props if homepage not set in WP.
     props.post = null
     props.error = false
   }

api/wordpress/_global/postTypes.js

@@ -1,15 +1,45 @@
 // Define valid WP post types (singular and plural GraphQL names).
 export const postTypes = {
-  career: 'careers',
-  comment: 'comments',
-  event: 'events',
-  mediaItem: 'mediaItems',
-  page: 'pages',
-  portfolio: 'portfolios',
-  post: 'posts',
-  service: 'services',
-  team: 'teams',
-  testimonial: 'testimonials'
+  career: {
+    pluralName: 'careers',
+    route: 'careers'
+  },
+  comment: {
+    pluralName: 'comments',
+    route: null
+  },
+  event: {
+    pluralName: 'events',
+    route: 'events'
+  },
+  mediaItem: {
+    pluralName: 'mediaItems',
+    route: null
+  },
+  page: {
+    pluralName: 'pages',
+    route: ''
+  },
+  portfolio: {
+    pluralName: 'portfolios',
+    route: 'portfolio'
+  },
+  post: {
+    pluralName: 'posts',
+    route: 'blog'
+  },
+  service: {
+    pluralName: 'services',
+    route: 'service'
+  },
+  team: {
+    pluralName: 'teams',
+    route: 'team'
+  },
+  testimonial: {
+    pluralName: 'testimonials',
+    route: 'testimonial'
+  }
 }
 
 // Define hierarchical post types.
@@ -20,7 +50,7 @@ export const hierarchicalPostTypes = ['page']
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {boolean}        Whether provided post type is valid.
+ * @return {boolean} Whether provided post type is valid.
  */
 export function isValidPostType(postType) {
   return Object.keys(postTypes).includes(postType)
@@ -31,7 +61,7 @@ export function isValidPostType(postType) {
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {boolean}        Whether provided post type is hierarchical.
+ * @return {boolean} Whether provided post type is hierarchical.
  */
 export function isHierarchicalPostType(postType) {
   return hierarchicalPostTypes.includes(postType)

api/wordpress/_global/queryDefaultPageData.js

@@ -3,7 +3,7 @@ import defaultPageData from '../_partials/defaultPageData'
 
 // Query: retrieve default SEO and other page data.
 const queryDefaultPageData = gql`
-  query GET_DEFAULT_SEO {
+  query GET_DEFAULT_PAGE_DATA {
     ${defaultPageData}
   }
 `

api/wordpress/_partials/commentsFields.js

@@ -0,0 +1,16 @@
+// Query partial: retrieve comment fields.
+const commentsFields = `
+edges {
+  node {
+    databaseId
+    content(format: RENDERED)
+    parentDatabaseId
+    approved
+    id
+    date
+    parentId
+    type
+  }
+}
+`
+export default commentsFields

api/wordpress/_partials/commentsPostFields.js

@@ -0,0 +1,9 @@
+import commentsFields from './commentsFields'
+
+// Query partial: retrieve comment post fields.
+const commentsPostFields = `
+  comments(first: 10) {
+    ${commentsFields}
+  }
+`
+export default commentsPostFields

api/wordpress/_partials/globalPostFields.js

@@ -5,5 +5,6 @@ const globalPostFields = `
   slug
   uri
   title
+  status
 `
 export default globalPostFields

api/wordpress/comments/queryCommentsByPostId.js

@@ -0,0 +1,29 @@
+import {gql} from '@apollo/client'
+import archivePageInfo from '../_partials/archivePageInfo'
+import commentsFields from '../_partials/commentsFields'
+
+// Query: retrieve comments by post databaseId.
+const queryCommentsByPostId = gql`
+  query GET_COMMENTS_BY_POST_ID(
+    $id: ID!
+    $first: Int
+    $last: Int
+    $after: String
+    $before: String
+    $order: OrderEnum = ASC
+    $orderby: CommentsConnectionOrderbyEnum = COMMENT_DATE
+  ) {
+    comments(
+      first: $first
+      last: $last
+      after: $after
+      before: $before
+      where: {contentId: $id, order: $order, orderby: $orderby}
+    ) {
+      ${archivePageInfo}
+      ${commentsFields}
+    }
+  }
+`
+
+export default queryCommentsByPostId