Set up bridge to backend

Author: oddevan

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/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/connector.js

@@ -19,7 +19,7 @@ const wpDataEndpointBase = '/wp'
 // Define Frontend WP API data endpoints.
 export const wpDataEndpoints = {
   archive: `${wpDataEndpointBase}/archive`,
-  comments: `${wpDataEndpointBase}/comments`
+  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'
+      )
+  }
+}