Support providers for the GraphQL server: Gato GraphQL in addition to WPGraphQL

.github/workflows/checks.yml

@@ -47,3 +47,4 @@ jobs:
       - run: pnpm build && pnpm export
         env:
           WORDPRESS_GRAPHQL_ENDPOINT: ${{ secrets.WORDPRESS_GRAPHQL_ENDPOINT }}
+          WORDPRESS_GRAPHQL_PROVIDER: ${{ secrets.WORDPRESS_GRAPHQL_PROVIDER }}

README.md

@@ -19,7 +19,7 @@ Scaling WordPress with the power of [Next.js](https://nextjs.org/) and the stati
 
 ### Requirements
 * [WordPress](https://wordpress.org/)
-* [WPGraphQL](https://www.wpgraphql.com/)
+* [WPGraphQL](https://www.wpgraphql.com/) or [Gato GraphQL](https://gatographql.com)
 * Environment variables (see below)
 
 ```bash
@@ -39,6 +39,11 @@ Change it as follows:
 WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
 ```
 
+The starter by default uses **WPGraphQL**. To use **Gato GraphQL**, add this variable to `.env.local`:
+```
+WORDPRESS_GRAPHQL_PROVIDER="gatographql"
+```
+
 ## 🚀 Getting Started
 
 ### What is this and what does it include?
@@ -68,30 +73,37 @@ Check out the [Issues](https://github.com/colbyfayock/next-wordpress-starter/iss
 
 ### Requirements
 * [WordPress](https://wordpress.org/)
-* [WPGraphQL](https://www.wpgraphql.com/)
+* [WPGraphQL](https://www.wpgraphql.com/) or [Gato GraphQL](https://gatographql.com)
 * Environment variables (see below)
 
+### Providers
+
+This project makes use of **WPGraphQL** or **Gato GraphQL** to query WordPress with GraphQL. Which provider to use is your choice. By default, **WPGraphQL** is used.
+
 ### Environment
 
-This project makes use of WPGraphQL to query WordPress with GraphQL. In order to make that request to the appropriate endpoint, we need to set a environment variable to let Next.js know where to request the site information from.
+In order to make that request to the appropriate endpoint, we need to set a environment variable to let Next.js know where to request the site information from.
 
 Create a new file locally called `.env.local` and add the following:
 
 ```bash
-WORDPRESS_GRAPHQL_ENDPOINT="[WPGraphQL Endpoint]"
+WORDPRESS_GRAPHQL_ENDPOINT="[GraphQL Endpoint]"
 ```
 
-Replace the contents of the variable with your WPGraphQL endpoint. By default, it should resemble `[Your Host]/graphql`.
+Replace the contents of the variable with your GraphQL endpoint. By default, it should resemble `[Your Host]/graphql`.
 
 *Note: environment variables can optionally be statically configured in next.config.js*
 
+*Note 2: In Gato GraphQL, the public single endpoint [must be explicitly enabled](https://gatographql.com/guides/config/enabling-and-configuring-the-single-endpoint)*
+
 #### All Environment Variables
 
-| Name                               | Required | Default | Description                                       |
-| ---------------------------------- | -------- | -       | ------------------------------------------------- |
-| WORDPRESS_GRAPHQL_ENDPOINT         | Yes      | -       | WordPress WPGraphQL endpoint (ex: host.com/graphl)|
-| WORDPRESS_MENU_LOCATION_NAVIGATION | No       | PRIMARY | Configures header navigation Menu Location        |
-| WORDPRESS_PLUGIN_SEO               | No       | false   | Enables SEO plugin support (true, false)          |
+| Name                               | Required | Default   | Description                                       |
+| ---------------------------------- | -------- | -         | ------------------------------------------------- |
+| WORDPRESS_GRAPHQL_ENDPOINT         | Yes      | -         | WordPress GraphQL endpoint (ex: host.com/graphql) |
+| WORDPRESS_GRAPHQL_PROVIDER         | No       | wpgraphql | GraphQL provider: 'wpgraphql' or 'gatographql'    |
+| WORDPRESS_MENU_LOCATION_NAVIGATION | No       | PRIMARY   | Configures header navigation Menu Location        |
+| WORDPRESS_PLUGIN_SEO               | No       | false     | Enables SEO plugin support (true, false)          |
 
 Please note some themes do not have PRIMARY menu location.
 
@@ -185,7 +197,7 @@ By enabling the Image Accelerator from Jetpack, your images will automatically b
 
 ### Yoast SEO
 
-The Yoast SEO plugin is partially supported including most major features like metadata and open graph customization.
+The Yoast SEO plugin is partially supported including most major features like metadata and open graph customization. For WPGraphQL only.
 
 #### Requirements
 * Yoast SEO plugin

plugins/providers/gatographql/util.js

@@ -0,0 +1,65 @@
+const { gql } = require('@apollo/client');
+
+const QUERY_ALL_POSTS = gql`
+  {
+    id
+    posts: self {
+      id
+      edges: posts(pagination: { limit: -1 }) {
+        node: self {
+          title
+          excerpt
+          databaseId: id
+          slug
+          date: dateStr
+          modified: modifiedDateStr
+          author {
+            node: self {
+              name
+            }
+          }
+          categories: self {
+            edges: categories(pagination: { limit: -1 }) {
+              node: self {
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const QUERY_SITE_METADATA = gql`
+  {
+    id
+    generalSettings: self {
+      id
+      description: optionValue(name: "blogdescription")
+      language: optionValue(name: "WPLANG")
+      title: optionValue(name: "blogname")
+    }
+  }
+`;
+
+const QUERY_ALL_PAGES = gql`
+  {
+    id
+    pages: self {
+      id
+      edges: pages(pagination: { limit: -1 }) {
+        node: self {
+          slug
+          modified: modifiedDateStr
+        }
+      }
+    }
+  }
+`;
+
+module.exports = {
+  QUERY_ALL_POSTS,
+  QUERY_SITE_METADATA,
+  QUERY_ALL_PAGES,
+};

plugins/providers/wpgraphql/util.js

@@ -0,0 +1,59 @@
+const { gql } = require('@apollo/client');
+
+const QUERY_ALL_POSTS = gql`
+  {
+    posts(first: 10000) {
+      edges {
+        node {
+          title
+          excerpt
+          databaseId
+          slug
+          date
+          modified
+          author {
+            node {
+              name
+            }
+          }
+          categories {
+            edges {
+              node {
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const QUERY_SITE_METADATA = gql`
+  {
+    generalSettings {
+      description
+      language
+      title
+    }
+  }
+`;
+
+const QUERY_ALL_PAGES = gql`
+  {
+    pages(first: 10000) {
+      edges {
+        node {
+          slug
+          modified
+        }
+      }
+    }
+  }
+`;
+
+module.exports = {
+  QUERY_ALL_POSTS,
+  QUERY_SITE_METADATA,
+  QUERY_ALL_PAGES,
+};

plugins/util.js

@@ -1,11 +1,19 @@
 const fs = require('fs');
 const he = require('he');
-const { gql, ApolloClient, InMemoryCache } = require('@apollo/client');
+const { ApolloClient, InMemoryCache } = require('@apollo/client');
 const RSS = require('rss');
 const prettier = require('prettier');
 
 const config = require('../package.json');
 
+const { WORDPRESS_GRAPHQL_PROVIDER } = require('../src/lib/provider');
+
+const {
+  QUERY_ALL_POSTS,
+  QUERY_SITE_METADATA,
+  QUERY_ALL_PAGES,
+} = require(`./providers/${WORDPRESS_GRAPHQL_PROVIDER}/util`);
+
 /**
  * createFile
  */
@@ -70,34 +78,7 @@ function createApolloClient(url) {
  */
 
 async function getAllPosts(apolloClient, process, verbose = false) {
-  const query = gql`
-    {
-      posts(first: 10000) {
-        edges {
-          node {
-            title
-            excerpt
-            databaseId
-            slug
-            date
-            modified
-            author {
-              node {
-                name
-              }
-            }
-            categories {
-              edges {
-                node {
-                  name
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  `;
+  const query = QUERY_ALL_POSTS;
 
   let posts = [];
 
@@ -139,15 +120,7 @@ async function getAllPosts(apolloClient, process, verbose = false) {
  */
 
 async function getSiteMetadata(apolloClient, process, verbose = false) {
-  const query = gql`
-    {
-      generalSettings {
-        description
-        language
-        title
-      }
-    }
-  `;
+  const query = QUERY_SITE_METADATA;
 
   let metadata = {};
 
@@ -175,18 +148,7 @@ async function getSiteMetadata(apolloClient, process, verbose = false) {
  */
 
 async function getPages(apolloClient, process, verbose = false) {
-  const query = gql`
-    {
-      pages(first: 10000) {
-        edges {
-          node {
-            slug
-            modified
-          }
-        }
-      }
-    }
-  `;
+  const query = QUERY_ALL_PAGES;
 
   let pages = [];
 

src/data/categories.js

@@ -1,69 +1,29 @@
-import { gql } from '@apollo/client';
+import {
+  QUERY_ALL_CATEGORIES as WPGRAPHQL_QUERY_ALL_CATEGORIES,
+  QUERY_CATEGORY_BY_SLUG as WPGRAPHQL_QUERY_CATEGORY_BY_SLUG,
+  QUERY_CATEGORY_SEO_BY_SLUG as WPGRAPHQL_QUERY_CATEGORY_SEO_BY_SLUG,
+} from './providers/wpgraphql/categories';
 
-export const QUERY_ALL_CATEGORIES = gql`
-  query AllCategories {
-    categories(first: 10000) {
-      edges {
-        node {
-          databaseId
-          description
-          id
-          name
-          slug
-        }
-      }
-    }
-  }
-`;
-
-export const QUERY_CATEGORY_BY_SLUG = gql`
-  query CategoryBySlug($slug: ID!) {
-    category(id: $slug, idType: SLUG) {
-      databaseId
-      description
-      id
-      name
-      slug
-    }
-  }
-`;
+import {
+  QUERY_ALL_CATEGORIES as GATOGRAPHQL_QUERY_ALL_CATEGORIES,
+  QUERY_CATEGORY_BY_SLUG as GATOGRAPHQL_QUERY_CATEGORY_BY_SLUG,
+  QUERY_CATEGORY_SEO_BY_SLUG as GATOGRAPHQL_QUERY_CATEGORY_SEO_BY_SLUG,
+} from './providers/gatographql/categories';
 
-export const QUERY_CATEGORY_SEO_BY_SLUG = gql`
-  query CategorySEOBySlug($slug: ID!) {
-    category(id: $slug, idType: SLUG) {
-      id
-      seo {
-        canonical
-        metaDesc
-        metaRobotsNofollow
-        metaRobotsNoindex
-        opengraphAuthor
-        opengraphDescription
-        opengraphModifiedTime
-        opengraphPublishedTime
-        opengraphPublisher
-        opengraphTitle
-        opengraphType
-        title
-        twitterDescription
-        twitterTitle
-        twitterImage {
-          altText
-          sourceUrl
-          mediaDetails {
-            width
-            height
-          }
-        }
-        opengraphImage {
-          altText
-          sourceUrl
-          mediaDetails {
-            height
-            width
-          }
-        }
+const { WORDPRESS_GRAPHQL_PROVIDER } = require('lib/provider');
+module.exports = {
+  ...(WORDPRESS_GRAPHQL_PROVIDER === 'wpgraphql'
+    ? {
+        QUERY_ALL_CATEGORIES: WPGRAPHQL_QUERY_ALL_CATEGORIES,
+        QUERY_CATEGORY_BY_SLUG: WPGRAPHQL_QUERY_CATEGORY_BY_SLUG,
+        QUERY_CATEGORY_SEO_BY_SLUG: WPGRAPHQL_QUERY_CATEGORY_SEO_BY_SLUG,
+      }
+    : {}),
+  ...(WORDPRESS_GRAPHQL_PROVIDER === 'gatographql'
+    ? {
+        QUERY_ALL_CATEGORIES: GATOGRAPHQL_QUERY_ALL_CATEGORIES,
+        QUERY_CATEGORY_BY_SLUG: GATOGRAPHQL_QUERY_CATEGORY_BY_SLUG,
+        QUERY_CATEGORY_SEO_BY_SLUG: GATOGRAPHQL_QUERY_CATEGORY_SEO_BY_SLUG,
       }
-    }
-  }
-`;
+    : {}),
+};