chore(gatsby): Convert query-runner to typescript (#22427)

* chore(gatsby): Export GraphQLRunner as named

* chore(gatsby): Convert query-runner to typescript

* Fix tests

* Fix typing

* remove accidental file

* bring back timeout code

* fix import

* fix yarn.lock

* fix test

* bring back destructured parentSpan for inc builds

* fix cloud tests

Co-authored-by: Blaine Kasten <blainekasten@gmail.com>

packages/gatsby/src/bootstrap/__tests__/create-graphql-runner.js

@@ -1,7 +1,8 @@
 jest.mock(`graphql`)
 
 import { createGraphQLRunner } from "../create-graphql-runner"
-const { execute, validate, parse } = require(`graphql`)
+import { execute, validate, parse } from "graphql"
+import { globalTracer } from "opentracing"
 
 parse.mockImplementation(() => {
   return {}
@@ -21,6 +22,11 @@ const createStore = (schema = {}) => {
   }
 }
 
+const tracingContext = {
+  graphqlTracing: false,
+  parentSpan: globalTracer().startSpan(`test`),
+}
+
 describe(`grapqhl-runner`, () => {
   let reporter
 
@@ -31,7 +37,11 @@ describe(`grapqhl-runner`, () => {
   })
 
   it(`should return the result when grapqhl has no errors`, async () => {
-    const graphqlRunner = createGraphQLRunner(createStore(), reporter)
+    const graphqlRunner = createGraphQLRunner(
+      createStore(),
+      reporter,
+      tracingContext
+    )
 
     const expectation = {
       data: {
@@ -46,7 +56,11 @@ describe(`grapqhl-runner`, () => {
   })
 
   it(`should return an errors array when structured errors found`, async () => {
-    const graphqlRunner = createGraphQLRunner(createStore(), reporter)
+    const graphqlRunner = createGraphQLRunner(
+      createStore(),
+      reporter,
+      tracingContext
+    )
 
     const expectation = {
       errors: [
@@ -64,7 +78,11 @@ describe(`grapqhl-runner`, () => {
   })
 
   it(`should throw a structured error when created from createPage file`, async () => {
-    const graphqlRunner = createGraphQLRunner(createStore(), reporter)
+    const graphqlRunner = createGraphQLRunner(
+      createStore(),
+      reporter,
+      tracingContext
+    )
 
     const errorObject = {
       stack: `Error

packages/gatsby/src/bootstrap/create-graphql-runner.ts

@@ -1,8 +1,9 @@
 import stackTrace from "stack-trace"
+import { Span } from "opentracing"
 import { ExecutionResultDataDefault } from "graphql/execution/execute"
 import { Store } from "redux"
 
-import GraphQLRunner from "../query/graphql-runner"
+import { GraphQLRunner } from "../query/graphql-runner"
 import errorParser from "../query/error-parser"
 import { emitter } from "../redux"
 import { Reporter } from "../.."
@@ -17,7 +18,13 @@ type Runner = (
 export const createGraphQLRunner = (
   store: Store<IGatsbyState>,
   reporter: Reporter,
-  { parentSpan, graphqlTracing } = { parentSpan: null, graphqlTracing: false }
+  {
+    parentSpan,
+    graphqlTracing,
+  }: { parentSpan: Span | undefined; graphqlTracing?: boolean } = {
+    parentSpan: undefined,
+    graphqlTracing: false,
+  }
 ): Runner => {
   // TODO: Move tracking of changed state inside GraphQLRunner itself. https://github.com/gatsbyjs/gatsby/issues/20941
   let runner = new GraphQLRunner(store, { graphqlTracing })

packages/gatsby/src/commands/build.ts

@@ -8,7 +8,7 @@ import { buildHTML } from "./build-html"
 import { buildProductionBundle } from "./build-javascript"
 import bootstrap from "../bootstrap"
 import apiRunnerNode from "../utils/api-runner-node"
-import GraphQLRunner from "../query/graphql-runner"
+import { GraphQLRunner } from "../query/graphql-runner"
 import { copyStaticDirs } from "../utils/get-static-dir"
 import { initTracer, stopTracer } from "../utils/tracer"
 import db from "../db"

packages/gatsby/src/query/__tests__/data-tracking.js

@@ -112,8 +112,12 @@ const setup = async ({ restart = isFirstRun, clearCache = false } = {}) => {
   }
 
   jest.doMock(`../query-runner`, () => {
-    const actualQueryRunner = jest.requireActual(`../query-runner`)
-    return jest.fn(actualQueryRunner)
+    const { queryRunner: actualQueryRunner } = jest.requireActual(
+      `../query-runner`
+    )
+    return {
+      queryRunner: jest.fn(actualQueryRunner),
+    }
   })
 
   jest.doMock(`../../utils/api-runner-node`, () => apiName => {
@@ -133,7 +137,7 @@ const setup = async ({ restart = isFirstRun, clearCache = false } = {}) => {
   const { store, emitter } = require(`../../redux`)
   const { saveState } = require(`../../db`)
   const reporter = require(`gatsby-cli/lib/reporter`)
-  const queryRunner = require(`../query-runner`)
+  const { queryRunner } = require(`../query-runner`)
   const { boundActionCreators } = require(`../../redux/actions`)
   const doubleBoundActionCreators = Object.keys(boundActionCreators).reduce(
     (acc, actionName) => {

packages/gatsby/src/query/graphql-runner.ts

@@ -1,5 +1,6 @@
 import crypto from "crypto"
 import v8 from "v8"
+import { Span } from "opentracing"
 import {
   parse,
   validate,
@@ -11,7 +12,6 @@ import {
   ExecutionResult,
 } from "graphql"
 import { debounce } from "lodash"
-import { IActivityArgs } from "gatsby-cli/lib/reporter"
 import * as nodeStore from "../db/nodes"
 import { createPageDependency } from "../redux/actions/add-page-dependency"
 
@@ -24,7 +24,7 @@ import GraphQLSpanTracer from "./graphql-span-tracer"
 
 type Query = string | Source
 
-export default class GraphQLRunner {
+export class GraphQLRunner {
   parseCache: Map<Query, DocumentNode>
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -135,11 +135,13 @@ export default class GraphQLRunner {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   query(
     query: Query,
-    context: Record<string, any>,
-    { parentSpan, queryName }: IActivityArgs & { queryName: string }
+    context: Record<string, unknown>,
+    {
+      parentSpan,
+      queryName,
+    }: { parentSpan: Span | undefined; queryName: string }
   ): Promise<ExecutionResult> {
     const { schema, schemaCustomization } = this.store.getState()
 

packages/gatsby/src/query/index.js

@@ -7,7 +7,7 @@ const { store, emitter } = require(`../redux`)
 const { boundActionCreators } = require(`../redux/actions`)
 const report = require(`gatsby-cli/lib/reporter`)
 const queryQueue = require(`./queue`)
-const GraphQLRunner = require(`./graphql-runner`).default
+const { GraphQLRunner } = require(`./graphql-runner`)
 
 const seenIdsWithoutDataDependencies = new Set()
 let queuedDirtyActions = []

packages/gatsby/src/query/query-runner.js → packages/gatsby/src/query/query-runner.ts

@@ -1,32 +1,50 @@
-// @flow
+import { Span } from "opentracing"
+import _ from "lodash"
+import fs from "fs-extra"
+import report from "gatsby-cli/lib/reporter"
+import crypto from "crypto"
+
+import path from "path"
+import { store } from "../redux"
+import { boundActionCreators } from "../redux/actions"
+import pageDataUtil from "../utils/page-data"
+import { getCodeFrame } from "./graphql-errors"
+import errorParser from "./error-parser"
+
+import { GraphQLRunner } from "./graphql-runner"
+import { ExecutionResult } from "graphql"
 
-const fs = require(`fs-extra`)
-const report = require(`gatsby-cli/lib/reporter`)
+const resultHashes = new Map()
 
-const path = require(`path`)
-const _ = require(`lodash`)
-const { store } = require(`../redux`)
-const { boundActionCreators } = require(`../redux/actions`)
-const pageDataUtil = require(`../utils/page-data`)
-const { getCodeFrame } = require(`./graphql-errors`)
-const { default: errorParser } = require(`./error-parser`)
+type PageContext = any
 
-const resultHashes = new Map()
+interface IQueryJob {
+  id: string
+  hash?: string
+  query: string
+  componentPath: string
+  context: PageContext
+  isPage: boolean
+  pluginCreatorId: string
+}
 
-type QueryJob = {
-  id: string,
-  hash?: string,
-  query: string,
-  componentPath: string,
-  context: Object,
-  isPage: Boolean,
+interface IExecutionResult extends ExecutionResult {
+  pageContext?: PageContext
 }
 
 // Run query
-module.exports = async (graphqlRunner, queryJob: QueryJob, { parentSpan }) => {
+export const queryRunner = async (
+  graphqlRunner: GraphQLRunner,
+  queryJob: IQueryJob,
+  parentSpan: Span | undefined
+): Promise<IExecutionResult> => {
   const { program } = store.getState()
 
-  const graphql = (query, context, queryName) => {
+  const graphql = (
+    query: string,
+    context: Record<string, unknown>,
+    queryName: string
+  ): Promise<ExecutionResult> => {
     // Check if query takes too long, print out warning
     const promise = graphqlRunner.query(query, context, {
       parentSpan,
@@ -63,7 +81,7 @@ module.exports = async (graphqlRunner, queryJob: QueryJob, { parentSpan }) => {
   }
 
   // Run query
-  let result
+  let result: IExecutionResult
   // Nothing to do if the query doesn't exist.
   if (!queryJob.query || queryJob.query === ``) {
     result = {}
@@ -87,6 +105,8 @@ module.exports = async (graphqlRunner, queryJob: QueryJob, { parentSpan }) => {
       .map(e => {
         const structuredError = errorParser({
           message: e.message,
+          filePath: undefined,
+          location: undefined,
         })
 
         structuredError.context = {
@@ -97,7 +117,7 @@ module.exports = async (graphqlRunner, queryJob: QueryJob, { parentSpan }) => {
             e.locations && e.locations[0].column
           ),
           filePath: queryJob.componentPath,
-          ...(urlPath && { urlPath }),
+          ...(urlPath ? { urlPath } : {}),
           ...queryContext,
           plugin,
         }
@@ -129,7 +149,7 @@ module.exports = async (graphqlRunner, queryJob: QueryJob, { parentSpan }) => {
   }
 
   const resultJSON = JSON.stringify(result)
-  const resultHash = require(`crypto`)
+  const resultHash = crypto
     .createHash(`sha1`)
     .update(resultJSON)
     .digest(`base64`)

packages/gatsby/src/query/queue.js

@@ -1,9 +1,9 @@
 const Queue = require(`better-queue`)
 const { store } = require(`../redux`)
 const FastMemoryStore = require(`../query/better-queue-custom-store`)
-const queryRunner = require(`../query/query-runner`)
+const { queryRunner } = require(`../query/query-runner`)
 const { websocketManager } = require(`../utils/websocket-manager`)
-const GraphQLRunner = require(`./graphql-runner`).default
+const { GraphQLRunner } = require(`./graphql-runner`)
 
 const createBaseOptions = () => {
   return {
@@ -18,7 +18,7 @@ const createBuildQueue = (graphqlRunner, runnerOptions = {}) => {
     graphqlRunner = new GraphQLRunner(store, runnerOptions)
   }
   const handler = ({ job, activity }, callback) =>
-    queryRunner(graphqlRunner, job, { parentSpan: activity?.span })
+    queryRunner(graphqlRunner, job, activity?.span)
       .then(result => callback(null, result))
       .catch(callback)
   const queue = new Queue(handler, createBaseOptions())
@@ -41,7 +41,7 @@ const createDevelopQueue = getRunner => {
   }
 
   const handler = ({ job: queryJob, activity }, callback) => {
-    queryRunner(getRunner(), queryJob, { parentSpan: activity?.span }).then(
+    queryRunner(getRunner(), queryJob, activity?.span).then(
       result => {
         if (queryJob.isPage) {
           websocketManager.emitPageData({

packages/gatsby/src/types.ts

@@ -2,7 +2,7 @@ export interface IMatch {
   id: string
   context: {
     sourceMessage: string
-    [key: string]: string | boolean
+    [key: string]: unknown
   }
   error?: Error | undefined
   [key: string]: unknown

packages/gatsby/src/utils/webpack-error-utils.ts

@@ -21,7 +21,7 @@ interface ITransformedWebpackError {
     stage: Stage
     stageLabel: StageLabel
     sourceMessage?: string
-    [key: string]: string | boolean | undefined
+    [key: string]: unknown
   }
 }
 const transformWebpackError = (