Merge pull request #34 from WebDevStudios/feature/apollo-wordpress-api-connection

Apollo Wordpress API Connection

Author: gregrickaby

api/wordpress/connector.js

@@ -0,0 +1,93 @@
+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'
+
+// Define env vars.
+export const wpApiUrlBase = getEnvVar('WORDPRESS_API_URL')
+
+// Set global state name.
+export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
+
+let apolloClient
+
+/**
+ * Create an basic Apollo client.
+ *
+ * @see https://www.apollographql.com/docs/react/api/core/ApolloClient/
+ */
+export function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: false,
+    link: new HttpLink({
+      uri: `${wpApiUrlBase}graphql`,
+      credentials: ''
+    }),
+    cache: new InMemoryCache()
+  })
+}
+
+/**
+ * Init Apollo and merge with initial state.
+ *
+ * @param {mixed} initialState The initial state of things.
+ */
+export function initializeApollo(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))
+        )
+      ]
+    })
+
+    // Restore the cache with the merged data.
+    _apolloClient.cache.restore(data)
+  }
+
+  // For SSG and SSR always create a new Apollo Client.
+  if (typeof window === 'undefined') return _apolloClient
+
+  // Create the Apollo Client once in the client.
+  if (!apolloClient) apolloClient = _apolloClient
+
+  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
+}

api/wordpress/posts/AllPosts.js

@@ -0,0 +1,47 @@
+import {gql, useQuery} from '@apollo/client'
+
+export const ALL_POSTS_QUERY = gql`
+  query allPosts {
+    posts {
+      edges {
+        node {
+          postId
+          title
+          slug
+        }
+      }
+    }
+  }
+`
+
+/**
+ * Query GraphQL and display the results.
+ *
+ * @see https://www.apollographql.com/docs/react/api/react/hooks/#usequery
+ */
+export default function AllPosts() {
+  const {loading, error, data} = useQuery(ALL_POSTS_QUERY)
+
+  if (error) return <div>Error loading posts.</div>
+  if (loading) return <div>Loading...</div>
+
+  const allPosts = data.posts.edges
+
+  return (
+    <section>
+      <ul>
+        {allPosts.map((post) => {
+          const {postId, slug, title} = post.node
+
+          return (
+            <li key={postId}>
+              <div>
+                <a href={slug}>{title}</a>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}

jsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/api/*": ["api/*"],
       "@/components/*": ["components/*"],
       "@/lib/*": ["lib/*"],
       "@/styles/*": ["styles/*"]

lib/config.js

@@ -6,6 +6,7 @@ const config = {
   navigation: [
     {label: 'Home', href: '/'},
     {label: 'About', href: '/about'},
+    {label: 'Apollo', href: '/apollo'},
     {label: 'SSG', href: '/ssg'},
     {label: 'SSR', href: '/ssr'},
     {label: 'ISR', href: '/isr'}

lib/functions.js

@@ -2,18 +2,34 @@
 export const fetcher = (...args) => fetch(...args).then((res) => res.json()) // eslint-disable-line no-undef
 
 /**
- * On scroll, add or remove a "shrink" class.
+ * Retrieve environment-specific var.
  *
- * @param {object} el The header element.
+ * @param  {string} varName  Environment variable.
+ * @param  {bool}   isPublic Whether var is public.
+ * @return {string}          Env var value.
  */
-export function shrinkHeader(el) {
-  /* eslint-disable */
-  window.addEventListener('scroll', () => {
-    if (window.scrollY > 30) {
-      el.current.classList.add('shrink')
-    } else {
-      el.current.classList.remove('shrink')
-    }
-  })
-  /* eslint-enable */
+export function getEnvVar(varName, isPublic = false) {
+  const prefix = isPublic ? 'NEXT_PUBLIC_' : ''
+
+  // If var missing or currently in Vercel "dev" (local), use local settings.
+  if (!process.env.VERCEL_ENV || 'development' === process.env.VERCEL_ENV) {
+    return process.env[`${prefix}LOCAL_${varName}`]
+  }
+
+  // Prod / main / default.
+  if (
+    'production' === process.env.VERCEL_ENV ||
+    'preview' !== process.env.VERCEL_ENV
+  ) {
+    return process.env[`${prefix}PROD_${varName}`]
+  }
+
+  // Switch between staging and develop in Vercel "preview" env.
+  switch (process.env.VERCEL_GITHUB_COMMIT_REF) {
+    case 'staging':
+      return process.env[`${prefix}STAGING_${varName}`]
+    case 'develop':
+    default:
+      return process.env[`${prefix}DEV_${varName}`]
+  }
 }

package.json

@@ -41,6 +41,7 @@
     "react-dom": "17.0.1"
   },
   "devDependencies": {
+    "@apollo/client": "^3.3.6",
     "@babel/core": "^7.12.10",
     "@storybook/addon-a11y": "^6.1.11",
     "@storybook/addon-actions": "^6.1.11",
@@ -49,13 +50,15 @@
     "@storybook/react": "^6.1.11",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.5.0",
+    "deepmerge": "^4.2.2",
     "eslint": "^7.16.0",
     "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-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "graphql": "^15.4.0",
     "husky": "^4.3.6",
     "lint-staged": "^10.5.3",
     "next-sitemap": "^1.3.22",

pages/_app.js

@@ -1,11 +1,24 @@
 import PropTypes from 'prop-types'
 import '@/styles/index.css'
+import {ApolloProvider} from '@apollo/client'
+import {useApollo} from '@/api/wordpress/connector'
 
-const App = ({Component, pageProps}) => <Component {...pageProps} />
+export default function App({Component, pageProps}) {
+  /**
+   * Wrap the app in the ApolloProvider component.
+   *
+   * @see https://www.apollographql.com/docs/react/api/react/hooks/#the-apolloprovider-component
+   */
+  const apolloClient = useApollo(pageProps)
+
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Component {...pageProps} />
+    </ApolloProvider>
+  )
+}
 
 App.propTypes = {
   Component: PropTypes.any.isRequired,
   pageProps: PropTypes.object.isRequired
 }
-
-export default App

pages/apollo.js

@@ -0,0 +1,33 @@
+import Layout from '@/components/common/Layout'
+import AllPosts, {ALL_POSTS_QUERY} from '@/api/wordpress/posts/AllPosts'
+import {initializeApollo, addApolloState} from '@/api/wordpress/connector'
+
+export default function ApolloPage() {
+  return (
+    <Layout
+      title="Apollo Query"
+      description="A static page that updates in the background every 60 seconds."
+    >
+      <div className="container">
+        <h1>Apollo Query Example</h1>
+        <AllPosts />
+      </div>
+    </Layout>
+  )
+}
+
+export async function getStaticProps() {
+  // Create an Apollo instance.
+  const apolloClient = initializeApollo()
+
+  // Run the query.
+  await apolloClient.query({
+    query: ALL_POSTS_QUERY
+  })
+
+  // Merge in query results as Apollo state.
+  return addApolloState(apolloClient, {
+    props: {},
+    revalidate: 60
+  })
+}