Merge pull request #119 from WebDevStudios/feature/60-add-comment-mutation

Feature/60 add comment mutation

Author: Greg Rickaby

api/frontend/wp/comments/mutationAddComment.js

@@ -0,0 +1,28 @@
+import {gql} from '@apollo/client'
+import {wpDataEndpoints} from '@/api/wordpress/connector'
+import commentsFields from '@/api/wordpress/_partials/commentsFields'
+
+// Mutation: Add a comment to the given post
+const mutationAddComment = gql`
+  mutation ADD_COMMENT(
+    $author: String
+    $authorEmail: String
+    $authorUrl: String
+    $postId: Int!
+    $content: String!
+  ) {
+    postComment (
+      author: $author,
+      authorEmail: $authorEmail,
+      authorUrl: $authorUrl,
+      postId: $postId,
+      content: $content
+    ) @rest(type: "Comments", path: "${wpDataEndpoints.postComment}?{args}") {
+      comment {
+        ${commentsFields}
+      }
+    }
+  }
+`
+
+export default mutationAddComment

api/frontend/wp/comments/postComment.js

@@ -0,0 +1,59 @@
+import mutationAddComment from './mutationAddComment'
+import {initializeFeApollo} from '../../connector'
+
+/**
+ * Post a comment to the given post. Follows established WordPress
+ * behavior for posting comments:
+ *
+ * If this is an authenticated request (i.e. "logged in"), the `author`
+ * fields will be ignored in favor of the logged-in user's information.
+ *
+ * If comment moderation is turned on, the `data.createComment.comment`
+ * object may be `null`. This does not necessarily indicate an error;
+ * the comment may be held for moderation.
+ *
+ * If the comment does not need manual approval, it will be returned
+ * with this query.
+ *
+ * @author WebDevStudios
+ * @param {string} author      Name of the comment author.
+ * @param {string} authorEmail Email for the comment author.
+ * @param {string} authorUrl   URL/website for the comment author.
+ * @param {number} postId      Database ID for the post being commented on.
+ * @param {string} content     Content of the comment.
+ * @return {object}            Comment data or error object.
+ */
+export default async function postComment(
+  author,
+  authorEmail,
+  authorUrl,
+  postId,
+  content
+) {
+  const apolloClient = initializeFeApollo()
+
+  return apolloClient
+    .mutate({
+      mutation: mutationAddComment,
+      variables: {
+        author,
+        authorEmail,
+        authorUrl,
+        postId,
+        content
+      }
+    })
+    .then(
+      (response) =>
+        response?.data?.createComment ?? {
+          error: true,
+          errorMessage: `An error occurred while trying to post the comment.`
+        }
+    )
+    .catch((error) => {
+      return {
+        error: true,
+        errorMessage: error.message
+      }
+    })
+}

api/wordpress/_global/postCommentToPost.js

@@ -0,0 +1,72 @@
+import {initializeWpApollo} from '../connector'
+import mutationCommentToPost from '../comments/mutationCommentToPost'
+
+/**
+ * Post a comment to the given post. Follows established WordPress
+ * behavior for posting comments:
+ *
+ * If this is an authenticated request (i.e. "logged in"), the `author`
+ * fields will be ignored in favor of the logged-in user's information.
+ *
+ * If comment moderation is turned on, the `data.createComment.comment`
+ * object may be `null`. This does not necessarily indicate an error;
+ * the comment may be held for moderation.
+ *
+ * If the comment does not need manual approval, it will be returned
+ * with this query.
+ *
+ * @author WebDevStudios
+ * @param {string} author      Name of the comment author.
+ * @param {string} authorEmail Email for the comment author.
+ * @param {string} authorUrl   URL/website for the comment author.
+ * @param {number} postId      Database ID for the post being commented on.
+ * @param {string} content     Content of the comment.
+ * @return {object}            Comment data or error object.
+ */
+export default async function postCommentToPost(
+  author,
+  authorEmail,
+  authorUrl,
+  postId,
+  content
+) {
+  // Get/create Apollo instance.
+  const apolloClient = initializeWpApollo()
+
+  // Set up return object.
+  const response = {
+    apolloClient,
+    comment: null
+  }
+
+  // Determine query variables.
+  const variables = {
+    author,
+    authorEmail,
+    authorUrl,
+    postId: parseInt(postId),
+    content
+  }
+
+  // Execute query.
+  await apolloClient
+    .mutate({mutation: mutationCommentToPost, variables})
+    .then((comment) => {
+      const {data} = comment
+      // Set error props if data not found.
+      if (!data?.createComment) {
+        response.error = true
+        response.errorMessage = `An error occurred while trying to post the comment.`
+
+        return null
+      }
+
+      response.comment = data.createComment.comment
+    })
+    .catch((error) => {
+      response.error = true
+      response.errorMessage = error.message
+    })
+
+  return response
+}

api/wordpress/_partials/commentsFields.js

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

api/wordpress/_partials/commentsPostFields.js

@@ -3,7 +3,11 @@ import commentsFields from './commentsFields'
 // Query partial: retrieve comment post fields.
 const commentsPostFields = `
   comments(first: 10) {
-    ${commentsFields}
+    edges {
+      node {
+        ${commentsFields}
+      }
+    }
   }
 `
 export default commentsPostFields

api/wordpress/comments/mutationCommentToPost.js

@@ -0,0 +1,29 @@
+import {gql} from '@apollo/client'
+import commentsFields from '../_partials/commentsFields'
+
+// Mutation: Add a comment to the given post
+const mutationCommentToPost = gql`
+  mutation ADD_COMMENT(
+    $author: String
+    $authorEmail: String
+    $authorUrl: String
+    $postId: Int!
+    $content: String!
+  ) {
+    createComment (
+      input: {
+        author: $author,
+        authorEmail: $authorEmail,
+        authorUrl: $authorUrl,
+        commentOn: $postId,
+        content: $content
+      }
+    ) {
+      comment {
+        ${commentsFields}
+      }
+    }
+  }
+`
+
+export default mutationCommentToPost

api/wordpress/comments/queryCommentsByPostId.js

@@ -21,7 +21,11 @@ const queryCommentsByPostId = gql`
       where: {contentId: $id, order: $order, orderby: $orderby}
     ) {
       ${archivePageInfo}
-      ${commentsFields}
+      edges {
+        node {
+          ${commentsFields}
+        }
+      }
     }
   }
 `

api/wordpress/connector.js

@@ -18,7 +18,8 @@ const wpDataEndpointBase = '/wp'
 
 // Define Frontend WP API data endpoints.
 export const wpDataEndpoints = {
-  archive: `${wpDataEndpointBase}/archive`
+  archive: `${wpDataEndpointBase}/archive`,
+  postComment: `${wpDataEndpointBase}/postComment`
 }
 
 let wpApolloClient

pages/api/wp/postComment.js

@@ -0,0 +1,39 @@
+import postCommentToPost from '@/api/wordpress/_global/postCommentToPost'
+
+/**
+ * Load more posts for an archive.
+ *
+ * @author WebDevStudios
+ * @param {object} req Instance of http.IncomingMessage.
+ * @param {object} res Instance of http.ServerResponse.
+ */
+export default async function postComment(req, res) {
+  try {
+    // Retrieve props from request query params.
+    const {author, authorEmail, authorUrl, postId, content} = req.query
+
+    const commentResponse = await postCommentToPost(
+      author,
+      authorEmail,
+      authorUrl,
+      postId,
+      content
+    )
+
+    // Check for errors.
+    if (commentResponse.error) {
+      throw new Error(commentResponse.errorMessage)
+    }
+
+    // Remove Apollo client from return.
+    delete commentResponse?.apolloClient
+
+    res.status(200).send(commentResponse)
+  } catch (error) {
+    res
+      .status(error?.status || 500)
+      .end(
+        error?.message || 'An error occurred while attempted to load more posts'
+      )
+  }
+}

pages/blog/[[...slug]].js

@@ -3,6 +3,7 @@ import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticPro
 import Layout from '@/components/common/Layout'
 import Link from 'next/link'
 import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
+import postComment from '@/api/frontend/wp/comments/postComment'
 import getPagePropTypes from '@/functions/getPagePropTypes'
 import Blocks from '@/components/molecules/Blocks'
 
@@ -29,6 +30,20 @@ export default function BlogPost({post, archive, posts, pagination}) {
     await getArchivePosts(postType, pagination?.endCursor)
   }
 
+  /**
+   * Post a comment back to the blog
+   */
+  async function postTestComment() {
+    // TODO: get form data and post the comment
+    await postComment(
+      'Test Testerson',
+      '[email protected]',
+      'https://nextjswp.test',
+      post.databaseId,
+      'This is a test comment.'
+    )
+  }
+
   // Check for post archive.
   // TODO create generic archive component and move this check to `_app.js`.
   if (archive) {
@@ -69,6 +84,7 @@ export default function BlogPost({post, archive, posts, pagination}) {
             __html: JSON.stringify(post?.comments ?? [])
           }}
         />
+        <button onClick={postTestComment}>Post test comment</button>
       </article>
     </Layout>
   )