Merge branch 'feature/33-previews' into develop

Author: ravewebdev

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,14 +19,14 @@ import getMenus from '../menus/getMenus'
  * @param {string}          postType WP post type.
  * @param {number | string} id       Post identifier.
  * @param {string}          idType   Type of ID.
- * @param {boolean}         preview  Whether checking if post preview exists.
+ * @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',
-  preview = false
+  preview = null
 ) {
   // Define single post query based on post type.
   const postTypeQuery = {
@@ -50,7 +50,9 @@ export default async function getPostTypeById(
   const query = postTypeQuery?.[postType] ?? null
 
   // Get/create Apollo instance.
-  const apolloClient = initializeWpApollo()
+  const apolloClient = preview
+    ? createWpApolloClient(true)
+    : initializeWpApollo()
 
   // Set up return object.
   const response = {
@@ -99,7 +101,7 @@ export default async function getPostTypeById(
         slug: id
       }
 
-      if (preview || !post || !post?.blocksJSON) {
+      if ('basic' === preview || !post || !post?.blocksJSON) {
         return post
       }
 

api/wordpress/_global/getPostTypeStaticProps.js

@@ -82,7 +82,8 @@ export default async function getPostTypeStaticProps(
   const {apolloClient, error, ...postData} = await getPostTypeById(
     postType,
     id,
-    idType
+    idType,
+    isCurrentPostPreview ? 'full' : null
   )
 
   const props = {

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/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

api/wordpress/connector.js

@@ -29,16 +29,17 @@ let wpApolloClient
  * @see https://www.apollographql.com/docs/react/api/core/ApolloClient/
  *
  * @author WebDevStudios
- * @return {object} Apollo client instance.
+ * @param {boolean} auth Whether to include authentication via WP application password.
+ * @return {object}      Apollo client instance.
  */
-export function createWpApolloClient() {
+export function createWpApolloClient(auth = false) {
   return new ApolloClient({
     ssrMode: false,
     link: new HttpLink({
       uri: `${wpApiUrlBase}graphql`,
       credentials: '',
       headers: {
-        authorization: `Basic ${wpAuthorization}`
+        authorization: auth ? `Basic ${wpAuthorization}` : ''
       }
     }),
     cache: new InMemoryCache()

api/wordpress/posts/queryPostById.js

@@ -6,6 +6,7 @@ import tagsPostFields from '../_partials/tagsPostFields'
 import categoriesPostFields from '../_partials/categoriesPostFields'
 import {gql} from '@apollo/client'
 import defaultPageData from '../_partials/defaultPageData'
+import commentsPostFields from '../_partials/commentsPostFields'
 
 // Fragment: retrieve single post fields.
 const singlePostFragment = gql`
@@ -18,6 +19,7 @@ const singlePostFragment = gql`
     ${featuredImagePostFields}
     ${tagsPostFields}
     ${categoriesPostFields}
+    ${commentsPostFields}
   }
 `
 // Query: retrieve post by specified identifier.

components/blocks/BlockHeadings/BlockHeadings.js

@@ -9,7 +9,9 @@ import React from 'react'
  * The core Headings block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {object} props The component attributes as props.
+ * @param {object} props       The component attributes as props.
+ * @param {object} props.props The block attributes props from WordPress.
+ * @return {Element}           RichText component with heading content.
  */
 export default function BlockHeadings({props}) {
   const {anchor, align, className, content, level} = props

components/blocks/BlockParagraph/BlockParagraph.js

@@ -8,7 +8,9 @@ import PropTypes from 'prop-types'
  * The core Paragraph block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {object} props The component attributes as props.
+ * @param {object} props       The component attributes as props.
+ * @param {object} props.props The block attributes props from WordPress.
+ * @return {Element}           RichText component with paragraph content.
  */
 export default function BlockParagraph({props}) {
   const {className, align, anchor, content} = props

components/molecules/Blocks/Blocks.js

@@ -7,7 +7,7 @@ import displayBlock from '@/functions/displayBlock'
  *
  * @author WebDevStudios
  * @param {object} props        The component attributes as props.
- * @param {array}  props.blocks The array of blocks.
+ * @param {Array}  props.blocks The array of blocks.
  * @return {Element}            The Blocks component.
  */
 export default function Blocks({blocks}) {