Merge pull request #46 from WebDevStudios/feature/45-form-query

Feature/45 form query

Author: Mike England

api/wordpress/_global/getPostTypeById.js

@@ -2,6 +2,7 @@ import queryPostById from '../posts/queryPostById'
 import {initializeApollo} from '../connector'
 import queryPageById from '../pages/queryPageById'
 import {isHierarchicalPostType} from './postTypes'
+import formatBlockData from '@/functions/formatBlockData'
 
 /**
  * Retrieve single post by specified identifier.
@@ -43,6 +44,20 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   const post = await apolloClient
     .query({query, variables: {id, idType}})
     .then((post) => post?.data?.[postType] ?? null)
+    .then(async (post) => {
+      // Handle blocks.
+      if (!post || !post?.blocksJSON) {
+        return post
+      }
+
+      const newPost = {...post}
+
+      newPost.blocks = await formatBlockData(
+        JSON.parse(newPost.blocksJSON) ?? []
+      )
+
+      return newPost
+    })
     .catch((error) => {
       return {
         isError: true,

api/wordpress/gravityForms/getFormById.js

@@ -0,0 +1,36 @@
+import {initializeApollo} from '../connector'
+import queryFormById from './queryFormById'
+
+/**
+ * Retrieve single form by ID.
+ *
+ * @param  {string} id Form ID.
+ * @return {Object}    Post data or error object.
+ */
+export default async function getFormById(id) {
+  // Determine form global ID.
+  const formId = Buffer.from(`GravityFormsForm:${id}`).toString('base64')
+
+  // Get/create Apollo instance.
+  const apolloClient = initializeApollo()
+
+  // Execute query.
+  const form = await apolloClient
+    .query({query: queryFormById, variables: {id: formId}})
+    .then((form) => form?.data?.gravityFormsForm ?? null)
+    .catch((error) => {
+      return {
+        isError: true,
+        message: error.message
+      }
+    })
+
+  if (!form) {
+    return {
+      isError: true,
+      message: `An error occurred while trying to retrieve data for form "${id}."`
+    }
+  }
+
+  return form
+}

api/wordpress/gravityForms/queryFormById.js

@@ -0,0 +1,87 @@
+const {gql} = require('@apollo/client')
+
+/**
+ * Partial: retrieve basic data on all form fields.
+ *
+ * @return {string} Form fields query partial.
+ */
+function getFormFieldsPartial() {
+  const fields = [
+    'AddressField',
+    'CaptchaField',
+    'ChainedSelectField',
+    'CheckboxField',
+    'DateField',
+    'EmailField',
+    'FileUploadField',
+    'HiddenField',
+    'HtmlField',
+    'ListField',
+    'MultiSelectField',
+    'NameField',
+    'NumberField',
+    'PageField',
+    'PasswordField',
+    'PhoneField',
+    'PostCategoryField',
+    'PostContentField',
+    'PostCustomField',
+    'PostExcerptField',
+    'PostImageField',
+    'PostTagsField',
+    'PostTitleField',
+    'RadioField',
+    'SectionField',
+    'SignatureField',
+    'SelectField',
+    'TextAreaField',
+    'TextField',
+    'TimeField',
+    'WebsiteField'
+  ]
+
+  return (
+    fields
+      // Build individual query partials by field type.
+      .map(
+        (field) => `
+          ... on ${field} {
+            type
+            label
+            cssClass
+          }
+        `
+      )
+      // Connect query partial pieces.
+      .join('')
+  )
+}
+
+// Fragment: retrieve single form fields.
+const singleFormFragment = gql`
+  fragment SingleFormFields on GravityFormsForm {
+    formId
+    title
+    description
+    cssClass
+    fields(first: 100) {
+      edges {
+        node {
+          ${getFormFieldsPartial()}
+        }
+      }
+    }
+  }
+`
+
+// Query: retrieve form by ID.
+const queryFormById = gql`
+  query GET_FORM_BY_ID($id: ID!) {
+    gravityFormsForm(id: $id) {
+      ...SingleFormFields
+    }
+  }
+  ${singleFormFragment}
+`
+
+export default queryFormById

functions/formatBlockData.js

@@ -0,0 +1,28 @@
+import getFormById from '@/api/wordpress/gravityForms/getFormById'
+
+/**
+ * Format and retrieve expanded block data.
+ *
+ * @param  {Array} blocks Basic block data.
+ * @return {Array}        Formatted block data.
+ */
+export default async function formatBlockData(blocks) {
+  if (!blocks || !blocks.length) {
+    return []
+  }
+
+  return await Promise.all(
+    blocks.map(async (block) => {
+      const {name, attributes} = block
+
+      switch (name) {
+        case 'gravityforms/form':
+          // Retrieve form data.
+          attributes.formData = await getFormById(attributes.formId)
+          break
+      }
+
+      return {name, attributes}
+    })
+  )
+}

pages/[...slug].js

@@ -28,7 +28,11 @@ export default function Page({post}) {
         <section>
           <article>
             <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
-            <div dangerouslySetInnerHTML={{__html: post?.blocksJSON}} />
+            <div
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(post?.blocks ?? [])
+              }}
+            />
           </article>
         </section>
       </div>

pages/posts/[[...slug]].js

@@ -28,7 +28,11 @@ export default function BlogPost({post}) {
         <section>
           <article>
             <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
-            <div dangerouslySetInnerHTML={{__html: post?.blocksJSON}} />
+            <div
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(post?.blocks ?? [])
+              }}
+            />
           </article>
         </section>
       </div>