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,
  }
 }