Merge pull request #42 from WebDevStudios/feature/33-basic-post-page-queries

Feature/33 basic post page queries

Author: gregrickaby

api/wordpress/_global/getPostTypeById.js

@@ -0,0 +1,61 @@
+import queryPostById from '../posts/queryPostById'
+import {initializeApollo} from '../connector'
+import queryPageById from '../pages/queryPageById'
+import {isHierarchicalPostType} from './postTypes'
+
+/**
+ * Retrieve single post by specified identifier.
+ *
+ * @author WebDevStudios
+ * @param  {string}        postType WP post type.
+ * @param  {Number|string} id       Post identifier.
+ * @param  {string}        idType   Type of ID.
+ * @return {Object}                 Post data or error object.
+ */
+export default async function getPostTypeById(postType, id, idType = 'SLUG') {
+  // Define single post query based on post type.
+  const postTypeQuery = {
+    page: queryPageById,
+    post: queryPostById
+  }
+
+  // Check if post type is hierarchical.
+  const isHierarchical = isHierarchicalPostType(postType)
+
+  // Fix default ID type for hierarchical posts.
+  idType = !isHierarchical || 'SLUG' !== idType ? idType : 'URI'
+
+  // Retrieve post type query.
+  const query = postTypeQuery?.[postType] ?? null
+
+  // If no query is set for given post type, return error message.
+  if (!query) {
+    return {
+      isError: true,
+      message: `Post type \`${postType}\` is not supported.`
+    }
+  }
+
+  // Get/create Apollo instance.
+  const apolloClient = initializeApollo()
+
+  // Execute query.
+  const post = await apolloClient
+    .query({query, variables: {id, idType}})
+    .then((post) => post?.data?.[postType] ?? null)
+    .catch((error) => {
+      return {
+        isError: true,
+        message: error.message
+      }
+    })
+
+  if (!post) {
+    return {
+      isError: true,
+      message: `An error occurred while trying to retrieve data for ${postType} "${id}."`
+    }
+  }
+
+  return post
+}

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -0,0 +1,64 @@
+import {gql} from '@apollo/client'
+import {isValidPostType, postTypes, isHierarchicalPostType} from './postTypes'
+import {initializeApollo} from '../connector'
+
+/**
+ * Retrieve static paths by post type.
+ *
+ * @author WebDevStudios
+ * @param  {string} postType WP post type.
+ * @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]
+
+  // Check if post type is hierarchical.
+  const isHierarchical = isHierarchicalPostType(postType)
+
+  // Determine path field based on hierarchy.
+  const pathField = isHierarchical ? 'uri' : 'slug'
+
+  // Construct query based on post type.
+  const query = gql`
+    query GET_SLUGS {
+      ${pluralName}(first: 10000) {
+        nodes {
+          ${pathField}
+        }
+      }
+    }
+  `
+
+  // Get/create Apollo instance.
+  const apolloClient = initializeApollo()
+
+  // Execute query.
+  const posts = await apolloClient.query({query})
+
+  // Process paths.
+  const paths = !posts?.data?.[pluralName]?.nodes
+    ? []
+    : posts.data[pluralName].nodes.map((post) => {
+        // Use path field as-is for non-hierarchical post types.
+        // Trim leading and trailing slashes then split into array on inner slashes for hierarchical post types.
+        const slug = !isHierarchical
+          ? post[pathField]
+          : post[pathField].replace(/^\/|\/$/g, '').split('/')
+
+        return {
+          params: {
+            slug
+          }
+        }
+      })
+
+  return {
+    paths,
+    fallback: false
+  }
+}

api/wordpress/_global/postTypes.js

@@ -0,0 +1,38 @@
+// Define valid WP post types (singular and plural GraphQL names).
+export const postTypes = {
+  career: 'careers',
+  comment: 'comments',
+  event: 'events',
+  mediaItem: 'mediaItems',
+  page: 'pages',
+  porfolio: 'portfolios',
+  post: 'posts',
+  service: 'services',
+  team: 'teams',
+  testimonial: 'testimonials'
+}
+
+// Define hierarchical post types.
+export const hierarchicalPostTypes = ['page']
+
+/**
+ * Check if post type is valid.
+ *
+ * @author WebDevStudios
+ * @param  {string} postType WP post type.
+ * @return {bool}            Whether provided post type is valid.
+ */
+export function isValidPostType(postType) {
+  return Object.keys(postTypes).includes(postType)
+}
+
+/**
+ * Check if post type is hierarchical.
+ *
+ * @author WebDevStudios
+ * @param  {string} postType WP post type.
+ * @return {bool}            Whether provided post type is hierarchical.
+ */
+export function isHierarchicalPostType(postType) {
+  return hierarchicalPostTypes.includes(postType)
+}

api/wordpress/connector.js

@@ -2,7 +2,7 @@ import {useMemo} from 'react'
 import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client'
 import merge from 'deepmerge'
 import isEqual from 'lodash/isEqual'
-import {getEnvVar} from '@/lib/functions'
+import getEnvVar from '@/functions/getEnvVar'
 
 // Define env vars.
 export const wpApiUrlBase = getEnvVar('WORDPRESS_API_URL')

api/wordpress/pages/queryPageById.js

@@ -0,0 +1,39 @@
+const {gql} = require('@apollo/client')
+
+// Query: retrieve page by specified identifier.
+const queryPageById = gql`
+  query GET_PAGE_BY_SLUG($id: ID!, $idType: PageIdType = URI) {
+    page(id: $id, idType: $idType) {
+      blocksJSON
+      databaseId
+      date
+      slug
+      title
+      excerpt
+      seo {
+        canonical
+        title
+        metaDesc
+        metaRobotsNofollow
+        metaRobotsNoindex
+        opengraphImage {
+          sourceUrl
+        }
+      }
+      author {
+        node {
+          slug
+          nickname
+        }
+      }
+      featuredImage {
+        node {
+          altText
+          sourceUrl(size: LARGE)
+        }
+      }
+    }
+  }
+`
+
+export default queryPageById

api/wordpress/posts/queryPostById.js

@@ -0,0 +1,55 @@
+const {gql} = require('@apollo/client')
+
+// Query: retrieve post by specified identifier.
+const queryPostById = gql`
+  query GET_POST_BY_SLUG($id: ID!, $idType: PostIdType = SLUG) {
+    post(id: $id, idType: $idType) {
+      blocksJSON
+      databaseId
+      date
+      slug
+      title
+      excerpt
+      seo {
+        canonical
+        title
+        metaDesc
+        metaRobotsNofollow
+        metaRobotsNoindex
+        opengraphImage {
+          sourceUrl
+        }
+      }
+      tags {
+        edges {
+          node {
+            name
+            slug
+          }
+        }
+      }
+      author {
+        node {
+          slug
+          nickname
+        }
+      }
+      categories {
+        edges {
+          node {
+            slug
+            name
+          }
+        }
+      }
+      featuredImage {
+        node {
+          altText
+          sourceUrl(size: LARGE)
+        }
+      }
+    }
+  }
+`
+
+export default queryPostById

components/common/Layout.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import Meta from './Meta'
 import Header from '../organisms/Header'
 import Footer from '../organisms/Footer'
-import config from '@/lib/config'
+import config from '@/functions/config'
 
 export default function Layout({children, ...props}) {
   return (

components/common/Meta.js

@@ -1,4 +1,4 @@
-import config from '@/lib/config'
+import config from '@/functions/config'
 import Head from 'next/head'
 import PropTypes from 'prop-types'
 

components/organisms/Footer.js

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import config from '@/lib/config'
+import config from '@/functions/config'
 
 export default function Footer() {
   return (

components/organisms/Navigation.js

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import Link from 'next/link'
-import config from '@/lib/config'
+import config from '@/functions/config'
 import Hamburger from 'hamburger-react'
 
 function Links() {