Update for CMS Wordpress Example. (#37402)

This PR updates cms-wordpress example:
- updated dependencies
- image domain handling
- new image domains
- error handling for lack of env variables
- minor code updates (isr)

Demo here: https://example-cms-wordpress.vercel.app/ -> should replace https://next-blog-wordpress.vercel.app/ that's using a buggy wpengine instance.

Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

examples/cms-wordpress/.env.local.example

@@ -1,5 +1,6 @@
 WORDPRESS_API_URL=
 
+
 # Only required if you want to enable preview mode
 # WORDPRESS_AUTH_REFRESH_TOKEN=
 # WORDPRESS_PREVIEW_SECRET=

examples/cms-wordpress/lib/api.js

@@ -1,6 +1,6 @@
 const API_URL = process.env.WORDPRESS_API_URL
 
-async function fetchAPI(query, { variables } = {}) {
+async function fetchAPI(query = '', { variables } = {}) {
   const headers = { 'Content-Type': 'application/json' }
 
   if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
@@ -9,9 +9,10 @@ async function fetchAPI(query, { variables } = {}) {
     ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
   }
 
-  const res = await fetch(API_URL, {
-    method: 'POST',
+  // WPGraphQL Plugin must be enabled
+  const res = await fetch(`${API_URL}/graphql`, {
     headers,
+    method: 'POST',
     body: JSON.stringify({
       query,
       variables,

examples/cms-wordpress/next.config.js

@@ -1,7 +1,15 @@
+if (!process.env.WORDPRESS_API_URL) {
+  throw new Error(`
+    Please provide a valid WordPress instance URL.
+    Add to your environment variables WORDPRESS_API_URL.
+  `)
+}
+
 module.exports = {
   images: {
     domains: [
-      // "[yourapp].wpengine.com" (Update this to be your Wordpress application name in order to load images connected to your posts)
+      process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
+      '2.gravatar.com',
       'secure.gravatar.com',
     ],
   },

examples/cms-wordpress/package.json

@@ -3,18 +3,19 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
+    "tailwindcss": "^3.0.24"
   }
 }

examples/cms-wordpress/pages/index.js

@@ -39,5 +39,6 @@ export async function getStaticProps({ preview = false }) {
 
   return {
     props: { allPosts, preview },
+    revalidate: 10,
   }
 }

examples/cms-wordpress/pages/posts/[slug].js

@@ -70,6 +70,7 @@ export async function getStaticProps({ params, preview = false, previewData }) {
       post: data.post,
       posts: data.posts,
     },
+    revalidate: 10,
   }
 }