Merge branch 'staging' into develop

Author: ravewebdev

api/apolloConfig.js

@@ -0,0 +1,68 @@
+import {useMemo} from 'react'
+import merge from 'deepmerge'
+import isEqual from 'lodash/isEqual'
+import {initializeWpApollo} from './wordpress/connector'
+
+// Set global state name.
+export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
+
+/**
+ * Init Apollo and merge with initial state.
+ *
+ * @author WebDevStudios
+ * @param  {Object} apolloClient Apollo client instance.
+ * @param  {mixed}  initialState The initial state of things.
+ * @return {Object}              Apollo client instance.
+ */
+export function initializeApollo(apolloClient, initialState = null) {
+  // If a page has Next.js data fetching methods that
+  // use Apollo Client, the initial state gets hydrated here.
+  if (initialState) {
+    // Get existing cache, loaded during client side data fetching.
+    const existingCache = apolloClient.extract()
+
+    // Merge the existing cache into data passed from getStaticProps()/getServerSideProps().
+    const data = merge(initialState, existingCache, {
+      // Combine arrays using object equality (like in sets).
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) =>
+          sourceArray.every((s) => !isEqual(d, s))
+        )
+      ]
+    })
+
+    // Restore the cache with the merged data.
+    apolloClient.cache.restore(data)
+  }
+
+  return apolloClient
+}
+
+/**
+ * Pass down Apollo state to page props.
+ *
+ * @author WebDevStudios
+ * @param {object} client Apollo  Client props.
+ * @param {object} pageProps      Props from getStaticProps().
+ */
+export function addApolloState(client, pageProps) {
+  if (pageProps?.props) {
+    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
+  }
+
+  return pageProps
+}
+
+/**
+ * Only update when the cache value has changed.
+ *
+ * @author WebDevStudios
+ * @param  {object} pageProps Props from getStaticProps().
+ */
+export function useApollo(pageProps) {
+  const state = pageProps[APOLLO_STATE_PROP_NAME]
+  // Use WP Apollo instance by default.
+  const store = useMemo(() => initializeWpApollo(state), [state])
+  return store
+}

api/wordpress/_global/getPostTypeArchive.js

@@ -1,4 +1,4 @@
-import {initializeApollo} from '../connector'
+import {initializeWpApollo} from '../connector'
 import queryPostsArchive from '../posts/queryPostsArchive'
 import {postTypes} from './postTypes'
 
@@ -31,7 +31,7 @@ export default async function getPostTypeArchive(
   const query = postTypeQuery?.[postType] ?? null
 
   // Get/create Apollo instance.
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeWpApollo()
 
   // Set up return object.
   const response = {

api/wordpress/_global/getPostTypeById.js

@@ -1,5 +1,5 @@
 import queryPostById from '../posts/queryPostById'
-import {initializeApollo} from '../connector'
+import {initializeWpApollo} from '../connector'
 import queryPageById from '../pages/queryPageById'
 import {isHierarchicalPostType} from './postTypes'
 import formatBlockData from '@/functions/formatBlockData'
@@ -30,7 +30,7 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   const query = postTypeQuery?.[postType] ?? null
 
   // Get/create Apollo instance.
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeWpApollo()
 
   // Set up return object.
   const response = {

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -1,6 +1,6 @@
 import {gql} from '@apollo/client'
 import {isValidPostType, postTypes, isHierarchicalPostType} from './postTypes'
-import {initializeApollo} from '../connector'
+import {initializeWpApollo} from '../connector'
 
 /**
  * Retrieve static paths by post type.
@@ -37,7 +37,7 @@ export default async function getPostTypeStaticPaths(postType) {
   `
 
   // Get/create Apollo instance.
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeWpApollo()
 
   // Execute query.
   const posts = await apolloClient.query({query})

api/wordpress/_global/getPostTypeStaticProps.js

@@ -1,10 +1,11 @@
 import getPostTypeById from './getPostTypeById'
-import {addApolloState} from '../connector'
 import getPostTypeArchive from './getPostTypeArchive'
+import {addApolloState} from '@/api/apolloConfig'
 
 /**
  * Retrieve static props by post type.
  *
+ * @author WebDevStudios
  * @param  {string}  params      Post params (e.g., slug).
  * @param  {string}  postType    Post Type.
  * @param  {boolean} preview     Whether requesting preview of post.

api/wordpress/connector.js

@@ -1,23 +1,21 @@
-import {useMemo} from 'react'
 import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client'
-import merge from 'deepmerge'
-import isEqual from 'lodash/isEqual'
 import getEnvVar from '@/functions/getEnvVar'
+import {initializeApollo} from '../apolloConfig'
 
 // Define env vars.
 export const wpApiUrlBase = getEnvVar('WORDPRESS_API_URL')
 
-// Set global state name.
-export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
-
-let apolloClient
+let wpApolloClient
 
 /**
- * Create an basic Apollo client.
+ * Create a basic Apollo client for connecting to WP.
  *
  * @see https://www.apollographql.com/docs/react/api/core/ApolloClient/
+ *
+ * @author WebDevStudios
+ * @return {Object} Apollo client instance.
  */
-export function createApolloClient() {
+export function createWpApolloClient() {
   return new ApolloClient({
     ssrMode: false,
     link: new HttpLink({
@@ -29,65 +27,23 @@ export function createApolloClient() {
 }
 
 /**
- * Init Apollo and merge with initial state.
+ * Init Apollo for WP and merge with initial state.
  *
- * @param {mixed} initialState The initial state of things.
+ * @author WebDevStudios
+ * @param  {mixed} initialState Initial Apollo state.
+ * @return {object}             WP Apollo client instance.
  */
-export function initializeApollo(initialState = null) {
+export function initializeWpApollo(initialState = null) {
   // Only run one instance of the Apollo client.
-  const _apolloClient = apolloClient ?? createApolloClient()
-
-  // If a page has Next.js data fetching methods that
-  // use Apollo Client, the initial state gets hydrated here.
-  if (initialState) {
-    // Get existing cache, loaded during client side data fetching.
-    const existingCache = _apolloClient.extract()
-
-    // Merge the existing cache into data passed from getStaticProps()/getServerSideProps().
-    const data = merge(initialState, existingCache, {
-      // Combine arrays using object equality (like in sets).
-      arrayMerge: (destinationArray, sourceArray) => [
-        ...sourceArray,
-        ...destinationArray.filter((d) =>
-          sourceArray.every((s) => !isEqual(d, s))
-        )
-      ]
-    })
+  const _apolloClient = wpApolloClient ?? createWpApolloClient()
 
-    // Restore the cache with the merged data.
-    _apolloClient.cache.restore(data)
-  }
+  const newApolloClient = initializeApollo(_apolloClient, initialState)
 
   // For SSG and SSR always create a new Apollo Client.
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === 'undefined') return newApolloClient
 
   // Create the Apollo Client once in the client.
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!wpApolloClient) wpApolloClient = newApolloClient
 
-  return _apolloClient
-}
-
-/**
- * Pass down Apollo state to page props.
- *
- * @param {object} client Apollo  Client props.
- * @param {object} pageProps      Props from getStaticProps().
- */
-export function addApolloState(client, pageProps) {
-  if (pageProps?.props) {
-    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
-  }
-
-  return pageProps
-}
-
-/**
- * Only update when the cache value has changed.
- *
- * @param {object} pageProps Props from getStaticProps().
- */
-export function useApollo(pageProps) {
-  const state = pageProps[APOLLO_STATE_PROP_NAME]
-  const store = useMemo(() => initializeApollo(state), [state])
-  return store
+  return newApolloClient
 }

api/wordpress/gravityForms/getFormById.js

@@ -1,9 +1,10 @@
-import {initializeApollo} from '../connector'
+import {initializeWpApollo} from '../connector'
 import queryFormById from './queryFormById'
 
 /**
  * Retrieve single form by ID.
  *
+ * @author WebDevStudios
  * @param  {string} id Form ID.
  * @return {Object}    Post data or error object.
  */
@@ -12,7 +13,7 @@ export default async function getFormById(id) {
   const formId = Buffer.from(`GravityFormsForm:${id}`).toString('base64')
 
   // Get/create Apollo instance.
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeWpApollo()
 
   // Execute query.
   const form = await apolloClient

api/wordpress/gravityForms/queryFormById.js

@@ -4,6 +4,7 @@ import {gql} from '@apollo/client'
 /**
  * Partial: retrieve basic data on all form fields.
  *
+ * @author WebDevStudios
  * @return {string} Form fields query partial.
  */
 function getFormFieldsPartial() {

functions/formatBlockData.js

@@ -3,6 +3,7 @@ import getFormById from '@/api/wordpress/gravityForms/getFormById'
 /**
  * Format and retrieve expanded block data.
  *
+ * @author WebDevStudios
  * @param  {Array} blocks Basic block data.
  * @return {Array}        Formatted block data.
  */

package.json

@@ -55,7 +55,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "graphql": "^15.4.0",