feat(gatsby): Move page component state & side effect handling to xstate

packages/gatsby/cache-dir/static-entry.js

@@ -114,13 +114,13 @@ export default (pagePath, callback) => {
 
   let dataAndContext = {}
   if (page.jsonName in dataPaths) {
-    const pathToJsonData = `../public/` + dataPaths[page.jsonName]
+    const pathToJsonData = join(
+      process.cwd(),
+      `/public/static/d`,
+      `${dataPaths[page.jsonName]}.json`
+    )
     try {
-      dataAndContext = JSON.parse(
-        fs.readFileSync(
-          `${process.cwd()}/public/static/d/${dataPaths[page.jsonName]}.json`
-        )
-      )
+      dataAndContext = JSON.parse(fs.readFileSync(pathToJsonData))
     } catch (e) {
       console.log(`error`, pathToJsonData, e)
       process.exit()

packages/gatsby/package.json

@@ -129,6 +129,7 @@
     "webpack-hot-middleware": "^2.21.0",
     "webpack-merge": "^4.1.0",
     "webpack-stats-plugin": "^0.1.5",
+    "xstate": "^4.3.2",
     "yaml-loader": "^0.5.0"
   },
   "devDependencies": {

packages/gatsby/src/bootstrap/index.js

@@ -461,9 +461,17 @@ module.exports = async (args: BootstrapArgs) => {
       ).toFixed(2)} queries/second`
     )
   })
-  await runInitialQueries(activity)
+  // HACKY!!! TODO: REMOVE IN NEXT REFACTOR
+  emitter.emit(`START_QUERY_QUEUE`)
+  // END HACKY
+  runInitialQueries(activity)
+  await new Promise(resolve => queryQueue.on(`drain`, resolve))
   activity.end()
 
+  require(`../redux/actions`).boundActionCreators.setProgramStatus(
+    `BOOTSTRAP_QUERY_RUNNING_FINISHED`
+  )
+
   // Write out files.
   activity = report.activityTimer(`write out page data`, {
     parentSpan: bootstrapSpan,
@@ -525,6 +533,9 @@ module.exports = async (args: BootstrapArgs) => {
     report.info(`bootstrap finished - ${process.uptime()} s`)
     report.log(``)
     emitter.emit(`BOOTSTRAP_FINISHED`)
+    require(`../redux/actions`).boundActionCreators.setProgramStatus(
+      `BOOTSTRAP_FINISHED`
+    )
     return {
       graphqlRunner,
     }

packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.js.snap

@@ -63,9 +63,7 @@ Array [
     "browserAPIs": Array [],
     "id": "84dad27f-1d44-51fc-ac56-4db2e5222995",
     "name": "query-runner",
-    "nodeAPIs": Array [
-      "onCreatePage",
-    ],
+    "nodeAPIs": Array [],
     "pluginOptions": Object {
       "plugins": Array [],
     },
@@ -181,9 +179,7 @@ Array [
     "browserAPIs": Array [],
     "id": "84dad27f-1d44-51fc-ac56-4db2e5222995",
     "name": "query-runner",
-    "nodeAPIs": Array [
-      "onCreatePage",
-    ],
+    "nodeAPIs": Array [],
     "pluginOptions": Object {
       "plugins": Array [],
     },

packages/gatsby/src/internal-plugins/query-runner/file-parser.js

@@ -13,6 +13,7 @@ import type { DocumentNode, DefinitionNode } from "graphql"
 import { babelParseToAst } from "../../utils/babel-parse-to-ast"
 
 const apiRunnerNode = require(`../../utils/api-runner-node`)
+const { boundActionCreators } = require(`../../redux/actions`)
 
 /**
  * Add autogenerated query name if it wasn't defined by user.
@@ -63,6 +64,10 @@ async function parseToAst(filePath, fileStr) {
     try {
       ast = babelParseToAst(fileStr, filePath)
     } catch (error) {
+      boundActionCreators.queryExtractionBabelError({
+        componentPath: filePath,
+        error,
+      })
       report.error(
         `There was a problem parsing "${filePath}"; any GraphQL ` +
           `fragments or queries in this file were not processed. \n` +

packages/gatsby/src/internal-plugins/query-runner/graphql-errors.js

@@ -55,21 +55,22 @@ function formatError(message: string, filePath: string, codeFrame: string) {
 }
 
 function extractError(error: Error): { message: string, docName: string } {
-  const docRegex = /Invariant Violation: (RelayParser|GraphQLParser): (.*). Source: document `(.*)` file:/g
+  const docRegex = /Error:.(RelayParser|GraphQLParser):(.*)Source: document.`(.*)`.file.*(GraphQL.request.*^\s*$)/gms
   let matches
-  let message = ``,
-    docName = ``
+  let message = ``
+  let docName = ``
+  let codeBlock = ``
   while ((matches = docRegex.exec(error.toString())) !== null) {
     // This is necessary to avoid infinite loops with zero-width matches
     if (matches.index === docRegex.lastIndex) docRegex.lastIndex++
-    ;[, , message, docName] = matches
+    ;[, , message, docName, codeBlock] = matches
   }
 
   if (!message) {
     message = error.toString()
   }
 
-  return { message, docName }
+  return { message, codeBlock, docName }
 }
 
 function findLocation(extractedMessage, def) {
@@ -169,15 +170,18 @@ export function graphqlError(
   nameDefMap: Map<string, any>,
   error: Error | RelayGraphQLError
 ) {
+  let codeBlock
   let { message, docName } = extractError(error)
   let filePath = namePathMap.get(docName)
 
   if (filePath && docName) {
-    return formatError(
+    codeBlock = getCodeFrameFromRelayError(
+      nameDefMap.get(docName),
       message,
-      filePath,
-      getCodeFrameFromRelayError(nameDefMap.get(docName), message, error)
+      error
     )
+    const formattedMessage = formatError(message, filePath, codeBlock)
+    return { formattedMessage, docName, message, codeBlock }
   }
 
   let reportedMessage = `There was an error while compiling your site's GraphQL queries.
@@ -194,5 +198,5 @@ export function graphqlError(
     reportedMessage += `${error.message.slice(21)}\n`
   }
 
-  return reportedMessage
+  return { formattedMessage: reportedMessage, docName, message, codeBlock }
 }

packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js

@@ -28,13 +28,17 @@ exports.queueQueryForPathname = pathname => {
 // Afterwards we listen "API_RUNNING_QUEUE_EMPTY" and check
 // for dirty nodes before running queries.
 exports.runInitialQueries = async () => {
-  await runQueries()
-
   active = true
+  await runQueries(true)
   return
 }
 
-const runQueries = async () => {
+const runQueries = async (initial = false) => {
+  // Don't run queries until bootstrap gets to "run graphql queries"
+  if (!active) {
+    return
+  }
+
   // Find paths dependent on dirty nodes
   queuedDirtyActions = _.uniq(queuedDirtyActions, a => a.payload.id)
   const dirtyIds = findDirtyIds(queuedDirtyActions)
@@ -45,11 +49,25 @@ const runQueries = async () => {
   const cleanIds = findIdsWithoutDataDependencies()
 
   // Construct paths for all queries to run
-  const pathnamesToRun = _.uniq([
-    ...runQueriesForPathnamesQueue,
-    ...dirtyIds,
-    ...cleanIds,
-  ])
+  let pathnamesToRun = _.uniq([...dirtyIds, ...cleanIds])
+
+  // If this is the initial run, remove pathnames from `runQueriesForPathnamesQueue`
+  // if they're also not in the dirtyIds or cleanIds.
+  //
+  // We do this because the page component reducer/machine always
+  // adds pages to runQueriesForPathnamesQueue but during bootstrap
+  // we may not want to run those page queries if their data hasn't
+  // changed since the last time we ran Gatsby.
+  let diffedPathnames = [...runQueriesForPathnamesQueue]
+  if (initial) {
+    diffedPathnames = _.intersection(
+      [...runQueriesForPathnamesQueue],
+      pathnamesToRun
+    )
+  }
+
+  // Combine.
+  pathnamesToRun = _.union(diffedPathnames, pathnamesToRun)
 
   runQueriesForPathnamesQueue.clear()
 
@@ -58,6 +76,8 @@ const runQueries = async () => {
   return
 }
 
+exports.runQueries = runQueries
+
 emitter.on(`CREATE_NODE`, action => {
   queuedDirtyActions.push(action)
 })
@@ -66,12 +86,6 @@ emitter.on(`DELETE_NODE`, action => {
   queuedDirtyActions.push({ payload: action.payload })
 })
 
-emitter.on(`CREATE_PAGE`, action => {
-  if (action.contextModified) {
-    exports.queueQueryForPathname(action.payload.path)
-  }
-})
-
 const runQueuedActions = async () => {
   if (active && !running) {
     try {

packages/gatsby/src/internal-plugins/query-runner/query-compiler.js

@@ -12,6 +12,7 @@ import filterContextForNode from "@gatsbyjs/relay-compiler/lib/filterContextForN
 const _ = require(`lodash`)
 
 import { store } from "../../redux"
+const { boundActionCreators } = require(`../../redux/actions`)
 import FileParser from "./file-parser"
 import GraphQLIRPrinter from "@gatsbyjs/relay-compiler/lib/GraphQLIRPrinter"
 import {
@@ -136,6 +137,7 @@ class Runner {
     const compiledNodes: Queries = new Map()
     const namePathMap = new Map()
     const nameDefMap = new Map()
+    const nameErrorMap = new Map()
     const documents = []
 
     for (let [filePath, doc] of nodes.entries()) {
@@ -165,8 +167,18 @@ class Runner {
         )
       )
     } catch (error) {
-      this.reportError(graphqlError(namePathMap, nameDefMap, error))
-      return compiledNodes
+      const { formattedMessage, docName, message, codeBlock } = graphqlError(
+        namePathMap,
+        nameDefMap,
+        error
+      )
+      nameErrorMap.set(docName, { formattedMessage, message, codeBlock })
+      boundActionCreators.queryExtractionGraphQLError({
+        componentPath: namePathMap.get(docName),
+        error: formattedMessage,
+      })
+      this.reportError(formattedMessage)
+      return false
     }
 
     // relay-compiler v1.5.0 added "StripUnusedVariablesTransform" to

packages/gatsby/src/internal-plugins/query-runner/query-queue.js

@@ -2,6 +2,7 @@ const Queue = require(`better-queue`)
 
 const queryRunner = require(`./query-runner`)
 const { store, emitter } = require(`../../redux`)
+const { boundActionCreators } = require(`../../redux/actions`)
 const websocketManager = require(`../../utils/websocket-manager`)
 
 const processing = new Set()
@@ -55,20 +56,41 @@ const queue = new Queue((plObj, callback) => {
           queue.push(waiting.get(plObj.id))
           waiting.delete(plObj.id)
         }
+
+        // Send event that the page query finished.
+        boundActionCreators.pageQueryRun({
+          path: plObj.id,
+          componentPath: plObj.componentPath,
+          isPage: plObj.isPage,
+        })
+
         return callback(null, result)
       },
       error => callback(error)
     )
 }, queueOptions)
 
+// HACKY!!! TODO: REMOVE IN NEXT REFACTOR
+// We start paused until we call `runInitialQueries` during bootstrap.
+let isBootstrapping = true
+queue.pause()
+
+emitter.on(`START_QUERY_QUEUE`, () => {
+  isBootstrapping = false
+  queue.resume()
+})
+// END HACKY
+
 // Pause running queries when new nodes are added (processing starts).
 emitter.on(`CREATE_NODE`, () => {
   queue.pause()
 })
 
 // Resume running queries as soon as the api queue is empty.
 emitter.on(`API_RUNNING_QUEUE_EMPTY`, () => {
-  queue.resume()
+  if (!isBootstrapping) {
+    queue.resume()
+  }
 })
 
 queue.on(`drain`, () => {