fix(gatsby): use correct state in the schema hot reloader (#19862)

* Fix schema rebuilding and add e2e test for it in develop * perf: use some vs filter for inference dirty checking
gatsbyjs · Nov 29, 2019 · f92cb9c · f92cb9c
1 parent b47929a
commit f92cb9c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 16 deletions.
diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/data-update.js b/e2e-tests/development-runtime/cypress/integration/functionality/data-update.js
@@ -2,6 +2,7 @@ const FILE_CONTENT = `
 ---
 title: A new post
 date: ${new Date().toJSON()}
+# foo: freshField
 ---
 
 A brand new post
@@ -13,19 +14,37 @@ describe(`on new file`, () => {
     cy.visit(`/`).waitForRouteChange()
   })
 
-  /*
-   * TODO: This seems to cause a page re-load
-   */
-  it.skip(`re-runs GraphQL queries with new file contents`, () => {
+  it(`re-runs GraphQL queries with new file contents`, () => {
+    const content = JSON.stringify(FILE_CONTENT)
     cy.exec(
-      `npm run update -- --file content/sample.md --file-content '${JSON.stringify(
-        FILE_CONTENT
-      )}'`
+      `npm run update -- --file content/new-file.md --file-content \\"${content}\\"`
     )
 
     cy.get(`ul`)
-      .find(`li`)
-      .its(`length`)
-      .should(`be.gt`, 1)
+      .find(`li:nth-child(2)`)
+      .should(`exist`, 1)
+  })
+})
+
+describe(`on schema change`, () => {
+  beforeEach(() => {
+    cy.visit(`/`).waitForRouteChange()
+  })
+
+  it(`rebuilds GraphQL schema`, () => {
+    const content = JSON.stringify(FILE_CONTENT)
+    cy.exec(
+      `npm run update -- --file content/new-file.md --exact --replacements "# foo:foo" --file-content \\"${content}\\"`
+    )
+    cy.exec(
+      `npm run update -- --file src/pages/schema-rebuild.js --exact --replacements "# foo:foo"`
+    )
+
+    cy.visit(`/schema-rebuild/`).waitForRouteChange()
+    cy.get(`p`).contains(`"foo":"freshField"`)
+
+    cy.exec(
+      `npm run update -- --file src/pages/schema-rebuild.js --exact --replacements "foo: # foo"`
+    )
   })
 })
diff --git a/e2e-tests/development-runtime/src/pages/schema-rebuild.js b/e2e-tests/development-runtime/src/pages/schema-rebuild.js
@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql } from "gatsby"
+import Layout from "../components/layout"
+import InstrumentPage from "../utils/instrument-page"
+
+const SchemaRebuildPage = ({ data }) => (
+  <Layout>
+    <p>{JSON.stringify(data)}</p>
+  </Layout>
+)
+
+export default InstrumentPage(SchemaRebuildPage)
+
+export const schemaRebuildQuery = graphql`
+  {
+    allMarkdownRemark {
+      edges {
+        node {
+          frontmatter {
+            title
+            # foo
+          }
+        }
+      }
+    }
+  }
+`
diff --git a/packages/gatsby/src/bootstrap/schema-hot-reloader.js b/packages/gatsby/src/bootstrap/schema-hot-reloader.js
@@ -5,12 +5,11 @@ const { haveEqualFields } = require(`../schema/infer/inference-metadata`)
 const { updateStateAndRunQueries } = require(`../query/query-watcher`)
 const report = require(`gatsby-cli/lib/reporter`)
 
-const inferredTypesChanged = (inferenceMetadata, prevInferenceMetadata) =>
-  Object.keys(inferenceMetadata).filter(
+const inferredTypesChanged = (typeMap, prevTypeMap) =>
+  Object.keys(typeMap).some(
     type =>
-      inferenceMetadata[type].dirty &&
-      !haveEqualFields(inferenceMetadata[type], prevInferenceMetadata[type])
-  ).length > 0
+      typeMap[type].dirty && !haveEqualFields(typeMap[type], prevTypeMap[type])
+  )
 
 const schemaChanged = (schemaCustomization, lastSchemaCustomization) =>
   [`fieldExtensions`, `printConfig`, `thirdPartySchemas`, `types`].some(
@@ -26,7 +25,7 @@ const maybeRebuildSchema = debounce(async () => {
   const { inferenceMetadata, schemaCustomization } = store.getState()
 
   if (
-    !inferredTypesChanged(inferenceMetadata, lastMetadata) &&
+    !inferredTypesChanged(inferenceMetadata.typeMap, lastMetadata.typeMap) &&
     !schemaChanged(schemaCustomization, lastSchemaCustomization)
   ) {
     return