fix(gatsby-source-wordpress): prevent inconsistent schema customization (#37749) (#37778)

* fix(gatsby-source-wordpress): prevent inconsistent schema customization (#37749)

* panic or warn when schema customization is inconsistent

* ensure types are always properly excluded

* add blocklist of typename parts which cause a type to be excluded if it's name includes a part

(cherry picked from commit 9f26b67)

* ignore browserlist update prompt

* fix ignore

* fix(gatsby-source-wordpress): Force removal of types (#37424)

---------

Co-authored-by: Tyler Barnes <[email protected]>
Co-authored-by: Michal Piechowiak <[email protected]>
Co-authored-by: Ty Hopp <[email protected]>

Author: 4 people

.circleci/config.yml

@@ -242,7 +242,7 @@ jobs:
 
   integration_tests_gatsby_source_wordpress:
     machine:
-      image: "ubuntu-2004:202107-02"
+      image: "ubuntu-2204:2023.02.1"
     steps:
       - run:
           command: |

integration-tests/gatsby-source-wordpress/__tests__/__snapshots__/index.js.snap

@@ -999,12 +999,6 @@ Array [
     "fields": null,
     "name": "WpAcfLinkFilterInput",
   },
-  Object {
-    "fields": Array [
-      "node",
-    ],
-    "name": "WpActionMonitorActionConnectionEdgeType",
-  },
   Object {
     "fields": Array [
       "default",
@@ -5556,18 +5550,6 @@ Array [
     ],
     "name": "WpEdgeType",
   },
-  Object {
-    "fields": Array [
-      "node",
-    ],
-    "name": "WpEnqueuedScriptConnectionEdgeType",
-  },
-  Object {
-    "fields": Array [
-      "node",
-    ],
-    "name": "WpEnqueuedStylesheetConnectionEdgeType",
-  },
   Object {
     "fields": null,
     "name": "WpFieldsEnum",
@@ -7237,12 +7219,6 @@ Array [
     ],
     "name": "WpPage_Acfpagefields_repeaterField_RepeaterFlex_RepeaterFlexTitleLayout",
   },
-  Object {
-    "fields": Array [
-      "node",
-    ],
-    "name": "WpPluginConnectionEdgeType",
-  },
   Object {
     "fields": Array [
       "author",
@@ -8457,12 +8433,6 @@ Array [
     "fields": null,
     "name": "WpTermNodeSortInput",
   },
-  Object {
-    "fields": Array [
-      "node",
-    ],
-    "name": "WpThemeConnectionEdgeType",
-  },
   Object {
     "fields": Array [
       "author",

packages/gatsby-source-wordpress/package.json

@@ -32,7 +32,8 @@
     "gatsby-plugin-utils": "^3.19.0",
     "gatsby-source-filesystem": "^4.25.0",
     "glob": "^7.2.3",
-    "got": "^11.8.5",
+    "got": "^11.8.6",
+    "json-diff": "^1.0.3",
     "lodash": "^4.17.21",
     "node-fetch": "^2.6.7",
     "p-queue": "^6.6.2",
@@ -60,8 +61,7 @@
     "identity-obj-proxy": "^3.0.0",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
-    "tree-kill": "^1.2.2",
-    "wait-on": "^4.0.2"
+    "tree-kill": "^1.2.2"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress#readme",
   "keywords": [

packages/gatsby-source-wordpress/src/models/gatsby-api.ts

@@ -307,36 +307,6 @@ const defaultPluginOptions: IPluginOptions = {
        */
       beforeChangeNode: menuBeforeChangeNode,
     },
-    // the next two types can't be sourced in Gatsby properly yet
-    // @todo instead of excluding these manually, auto exclude them
-    // based on how they behave (no single node query available)
-    EnqueuedScript: {
-      exclude: true,
-    },
-    EnqueuedStylesheet: {
-      exclude: true,
-    },
-    EnqueuedAsset: {
-      exclude: true,
-    },
-    ContentNodeToEnqueuedScriptConnection: {
-      exclude: true,
-    },
-    ContentNodeToEnqueuedStylesheetConnection: {
-      exclude: true,
-    },
-    TermNodeToEnqueuedScriptConnection: {
-      exclude: true,
-    },
-    TermNodeToEnqueuedStylesheetConnection: {
-      exclude: true,
-    },
-    UserToEnqueuedScriptConnection: {
-      exclude: true,
-    },
-    UserToEnqueuedStylesheetConnection: {
-      exclude: true,
-    },
   },
 }
 

packages/gatsby-source-wordpress/src/steps/create-schema-customization/helpers.js

@@ -2,6 +2,9 @@ import store from "~/store"
 import { typeDefinitionFilters } from "./type-filters"
 import { getPluginOptions } from "~/utils/get-gatsby-api"
 import { cloneDeep, merge } from "lodash"
+import { diffString } from "json-diff"
+import { formatLogMessage } from "../../utils/format-log-message"
+import { CODES } from "../../utils/report"
 
 export const buildInterfacesListForType = type => {
   let shouldAddNodeType = false
@@ -298,3 +301,151 @@ export const introspectionFieldTypeToSDL = fieldType => {
 
   return openingTagsList.join(``) + closingTagsList.reverse().join(``)
 }
+
+/**
+ * This is an expensive fn but it doesn't matter because it's only to show a debugging warning message when something is wrong.
+ */
+function mergeDuplicateTypesAndReturnDedupedList(typeDefs) {
+  const clonedDefs = cloneDeep(typeDefs)
+
+  const newList = []
+
+  for (const def of clonedDefs) {
+    if (!def) {
+      continue
+    }
+
+    const duplicateDefs = clonedDefs.filter(
+      d => d.config.name === def.config.name
+    )
+
+    const newDef = {}
+
+    for (const dDef of duplicateDefs) {
+      merge(newDef, dDef)
+    }
+
+    newList.push(newDef)
+  }
+
+  return newList
+}
+
+/**
+ * Diffs the built types between this build and the last one with the same remote schema hash.
+ * This is to catch and add helpful error messages for when an inconsistent schema between builds is inadvertently created due to some bug
+ */
+export async function diffBuiltTypeDefs(typeDefs) {
+  if (
+    process.env.NODE_ENV !== `development` &&
+    process.env.WP_DIFF_SCHEMA_CUSTOMIZATION !== `true`
+  ) {
+    return
+  }
+
+  const state = store.getState()
+
+  const {
+    gatsbyApi: {
+      helpers: { cache, reporter },
+    },
+    remoteSchema,
+  } = state
+
+  const previousTypeDefinitions = await cache.get(`previousTypeDefinitions`)
+  const typeDefString = JSON.stringify(typeDefs)
+  const typeNames = typeDefs.map(typeDef => typeDef.config.name)
+
+  const remoteSchemaChanged =
+    !previousTypeDefinitions ||
+    previousTypeDefinitions?.schemaHash !== remoteSchema.schemaHash
+
+  if (remoteSchemaChanged) {
+    await cache.set(`previousTypeDefinitions`, {
+      schemaHash: remoteSchema.schemaHash,
+      typeDefString,
+      typeNames,
+    })
+    return
+  }
+
+  // type defs are the same as last time, so don't check for missing/inconsistent types
+  if (previousTypeDefinitions?.typeDefString === typeDefString) {
+    return
+  }
+
+  const missingTypeNames = previousTypeDefinitions.typeNames.filter(
+    name => !typeNames.includes(name)
+  )
+
+  const previousTypeDefJson = mergeDuplicateTypesAndReturnDedupedList(
+    JSON.parse(previousTypeDefinitions.typeDefString)
+  )
+
+  const newParsedTypeDefs = mergeDuplicateTypesAndReturnDedupedList(
+    JSON.parse(typeDefString)
+  )
+
+  const changedTypeDefs = newParsedTypeDefs
+    .map(typeDef => {
+      const previousTypeDef = previousTypeDefJson.find(
+        previousTypeDef => previousTypeDef.config.name === typeDef.config.name
+      )
+
+      const isDifferent = diffString(previousTypeDef, typeDef)
+
+      if (isDifferent) {
+        return `Typename ${typeDef.config.name} diff:\n${diffString(
+          previousTypeDef,
+          typeDef,
+          {
+            // diff again to also show unchanged lines
+            full: true,
+          }
+        )}`
+      }
+
+      return null
+    })
+    .filter(Boolean)
+
+  let errorMessage = formatLogMessage(
+    `The remote WPGraphQL schema hasn't changed but local generated type definitions have. This is a bug, please open an issue on Github${
+      missingTypeNames.length || changedTypeDefs.length
+        ? ` and include the following text.`
+        : ``
+    }.${
+      missingTypeNames.length
+        ? `\n\nMissing type names: ${missingTypeNames.join(`\n`)}\n`
+        : ``
+    }${
+      changedTypeDefs.length
+        ? `\n\nChanged type defs:\n\n${changedTypeDefs.join(`\n`)}`
+        : ``
+    }`
+  )
+
+  const maxErrorLength = 5000
+
+  if (errorMessage.length > maxErrorLength) {
+    errorMessage =
+      errorMessage.substring(0, maxErrorLength) +
+      `\n\n...\n[Diff exceeded ${maxErrorLength} characters and was truncated]`
+  }
+
+  if (process.env.WP_INCONSISTENT_SCHEMA_WARN !== `true`) {
+    reporter.info(
+      formatLogMessage(
+        `Panicking due to inconsistent schema customization. Turn this into a warning by setting process.env.WP_INCONSISTENT_SCHEMA_WARN to a string of "true"`
+      )
+    )
+    reporter.panic({
+      id: CODES.InconsistentSchemaCustomization,
+      context: {
+        sourceMessage: errorMessage,
+      },
+    })
+  } else {
+    reporter.warn(errorMessage)
+  }
+}

packages/gatsby-source-wordpress/src/steps/create-schema-customization/index.js

@@ -1,6 +1,6 @@
 import store from "~/store"
 
-import { buildInterfacesListForType, fieldOfTypeWasFetched } from "./helpers"
+import { diffBuiltTypeDefs, fieldOfTypeWasFetched } from "./helpers"
 
 import buildType from "./build-types"
 import { getGatsbyNodeTypeNames } from "../source-nodes/fetch-nodes/fetch-nodes"
@@ -105,6 +105,7 @@ const customizeSchema = async ({ actions, schema, store: gatsbyStore }) => {
     )
   )
 
+  diffBuiltTypeDefs(typeDefs)
   actions.createTypes(typeDefs)
 }
 

packages/gatsby-source-wordpress/src/steps/ingest-remote-schema/build-queries-from-introspection/recursively-transform-fields.js

@@ -9,6 +9,7 @@ import {
   fieldIsExcludedOnAll,
 } from "~/steps/ingest-remote-schema/is-excluded"
 import { returnAliasedFieldName } from "~/steps/create-schema-customization/transform-fields"
+import { typeIsExcluded } from "../is-excluded"
 
 export const transformInlineFragments = ({
   possibleTypes,
@@ -63,6 +64,15 @@ export const transformInlineFragments = ({
         return false
       }
 
+      if (
+        typeIsExcluded({
+          pluginOptions,
+          typeName: findNamedTypeName(type),
+        })
+      ) {
+        return false
+      }
+
       possibleType.type = { ...type }
 
       // save this type so we can use it in schema customization
@@ -531,6 +541,10 @@ const transformFields = ({
         !fieldIsExcludedOnAll({
           pluginOptions,
           field,
+        }) &&
+        !typeIsExcluded({
+          pluginOptions,
+          typeName: findNamedTypeName(field.type),
         })
     )
     .map(field => {