feat(gatsby): Initial GraphQL Typegen Implementation

e2e-tests/development-runtime/.gitignore

@@ -74,3 +74,5 @@ cypress/fixtures
 cypress/videos
 
 __history__.json
+
+src/gatsby-types.d.ts

e2e-tests/development-runtime/cypress/integration/graphql-typegen/fragments-file.js

@@ -0,0 +1,5 @@
+describe('fragments.graphql', () => {
+  it('exists in .cache folder', () => {
+    cy.readFile('.cache/typegen/fragments.graphql')
+  })
+})

e2e-tests/development-runtime/cypress/integration/graphql-typegen/graphql-config.js

@@ -0,0 +1,20 @@
+describe('graphql-config', () => {
+  it('exists in .cache folder with correct data', () => {
+    cy.readFile('.cache/typegen/graphql.config.json', 'utf-8').then((json) => {
+      expect(json).to.deep.equal({
+        "schema": ".cache/typegen/schema.graphql",
+        "documents": [
+          "src/**/**.{ts,js,tsx,jsx}",
+          ".cache/typegen/fragments.graphql"
+        ],
+        "extensions": {
+          "endpoints": {
+            "default": {
+              "url": "http://localhost:8000/___graphql"
+            }
+          }
+        }
+      })
+    })
+  })
+})

e2e-tests/development-runtime/cypress/integration/graphql-typegen/schema-file.js

@@ -0,0 +1,5 @@
+describe('schema.graphql', () => {
+  it('exists in .cache folder', () => {
+    cy.readFile('.cache/typegen/schema.graphql')
+  })
+})

e2e-tests/development-runtime/cypress/integration/graphql-typegen/ts-types.js

@@ -0,0 +1,5 @@
+describe('gatsby-types.d.ts', () => {
+  it('exists in src folder', () => {
+    cy.readFile('src/gatsby-types.d.ts')
+  })
+})

e2e-tests/development-runtime/gatsby-config.js

@@ -8,6 +8,7 @@ module.exports = {
   },
   flags: {
     DEV_SSR: false,
+    GRAPHQL_TYPEGEN: true,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

e2e-tests/development-runtime/package.json

@@ -23,9 +23,9 @@
     "gatsby-transformer-sharp": "next",
     "node-fetch": "^2.6.1",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^5.2.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
     "sass": "^1.32.8"
   },
   "keywords": [

e2e-tests/development-runtime/src/pages/collection-routing/hogwarts/{FakeData.uuid}.js

@@ -15,7 +15,7 @@ export default function FakeDataHogwarts({ data: { fake }, pageContext: { uuid }
 }
 
 export const blogPostQuery = graphql`
-  query($id: String!) {
+  query FakeDataHogwarts($id: String!) {
     fake: fakeData(id: { eq: $id }) {
       fields {
         slug

e2e-tests/development-runtime/src/pages/collection-routing/prefix-{FakeData.uuid}.js

@@ -15,7 +15,7 @@ export default function FakeDataPrefix({ data: { fake }, pageContext: { uuid } }
 }
 
 export const blogPostQuery = graphql`
-  query($id: String!) {
+  query FakeDataPrefix($id: String!) {
     fake: fakeData(id: { eq: $id }) {
       fields {
         slug

e2e-tests/development-runtime/src/pages/collection-routing/{FakeData.title}/{FakeData.uuid}.js

@@ -15,7 +15,7 @@ export default function FakeDataNested({ data: { fake }, pageContext: { uuid } }
 }
 
 export const blogPostQuery = graphql`
-  query($id: String!) {
+  query FakeDataNested($id: String!) {
     fake: fakeData(id: { eq: $id }) {
       fields {
         slug

e2e-tests/development-runtime/src/pages/collection-routing/{FakeData.uuid}-postfix.js

@@ -15,7 +15,7 @@ export default function FakeDataPostfix({ data: { fake }, pageContext: { uuid }
 }
 
 export const blogPostQuery = graphql`
-  query($id: String!) {
+  query FakeDataPostfix($id: String!) {
     fake: fakeData(id: { eq: $id }) {
       fields {
         slug

e2e-tests/development-runtime/src/pages/collection-routing/{FakeData.uuid}.js

@@ -15,7 +15,7 @@ export default function FakeData({ data: { fake }, pageContext: { uuid } }) {
 }
 
 export const blogPostQuery = graphql`
-  query($id: String!) {
+  query FakeData($id: String!) {
     fake: fakeData(id: { eq: $id }) {
       fields {
         slug

packages/gatsby/package.json

@@ -20,6 +20,15 @@
     "@babel/types": "^7.15.4",
     "@gatsbyjs/reach-router": "^1.3.6",
     "@gatsbyjs/webpack-hot-middleware": "^2.25.2",
+    "@graphql-codegen/add": "^3.1.1",
+    "@graphql-codegen/core": "^2.5.1",
+    "@graphql-codegen/plugin-helpers": "^2.4.2",
+    "@graphql-codegen/typescript": "^2.4.8",
+    "@graphql-codegen/typescript-operations": "^2.3.5",
+    "@graphql-codegen/typescript-resolvers": "^2.6.1",
+    "@graphql-codegen/visitor-plugin-common": "^2.7.4",
+    "@graphql-tools/code-file-loader": "^7.2.14",
+    "@graphql-tools/load": "^7.5.10",
     "@nodelib/fs.walk": "^1.2.8",
     "@parcel/core": "^2.3.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

packages/gatsby/src/commands/develop-process.ts

@@ -151,6 +151,7 @@ module.exports = async (program: IDevelopArgs): Promise<void> => {
     parentSpan,
     app,
     pendingQueryRuns: new Set([`/`]),
+    shouldRunInitialTypegen: true,
   })
 
   const service = interpret(machine)

packages/gatsby/src/query/query-watcher.ts

@@ -137,7 +137,7 @@ const watch = async (rootDir: string): Promise<void> => {
   watcher = chokidar
     .watch(
       [slash(path.join(rootDir, `/src/**/*.{js,jsx,ts,tsx}`)), ...packagePaths],
-      { ignoreInitial: true }
+      { ignoreInitial: true, ignored: [`**/*.d.ts`] }
     )
     .on(`change`, path => {
       emitter.emit(`SOURCE_FILE_CHANGED`, path)

packages/gatsby/src/redux/types.ts

@@ -1,7 +1,12 @@
 import type { TrailingSlash } from "gatsby-page-utils"
 import { IProgram } from "../commands/types"
 import { GraphQLFieldExtensionDefinition } from "../schema/extensions"
-import { DocumentNode, GraphQLSchema, DefinitionNode } from "graphql"
+import {
+  DocumentNode,
+  GraphQLSchema,
+  DefinitionNode,
+  SourceLocation,
+} from "graphql"
 import { SchemaComposer } from "graphql-compose"
 import { IGatsbyCLIState } from "gatsby-cli/src/reporter/redux/types"
 import { ThunkAction } from "redux-thunk"
@@ -153,12 +158,13 @@ export interface IDefinitionMeta {
   def: DefinitionNode
   filePath: string
   text: string
-  templateLoc: any
-  printedAst: string
+  templateLoc: SourceLocation
+  printedAst: string | null
   isHook: boolean
   isStaticQuery: boolean
   isFragment: boolean
-  hash: string
+  isConfigQuery: boolean
+  hash: number
 }
 
 type GatsbyNodes = Map<string, IGatsbyNode>

packages/gatsby/src/schema/print.ts

@@ -27,7 +27,7 @@ import {
 import { printBlockString } from "graphql/language/blockString"
 import { internalExtensionNames } from "./extensions"
 import _ from "lodash"
-import { builtInScalarTypeNames } from "./types/built-in-types"
+import { internalTypeNames } from "./types/built-in-types"
 
 export interface ISchemaPrintConfig {
   path?: string
@@ -341,16 +341,6 @@ export const printTypeDefinitions = ({
     )
     return Promise.resolve()
   }
-
-  const internalTypes = [
-    ...builtInScalarTypeNames,
-    `Buffer`,
-    `Internal`,
-    `InternalInput`,
-    `Node`,
-    `NodeInput`,
-    `Query`,
-  ]
   const internalPlugins = [`internal-data-bridge`]
 
   const typesToExclude = exclude?.types || []
@@ -360,7 +350,7 @@ export const printTypeDefinitions = ({
 
   const isInternalType = (tc: NamedTypeComposer<unknown>): boolean => {
     const typeName = getName(tc)
-    if (internalTypes.includes(typeName)) {
+    if (internalTypeNames.includes(typeName)) {
       return true
     }
 

packages/gatsby/src/schema/types/built-in-types.ts

@@ -157,3 +157,13 @@ export const builtInScalarTypeNames = [
   `JSON`,
   `String`,
 ]
+
+export const internalTypeNames = [
+  ...builtInScalarTypeNames,
+  `Buffer`,
+  `Internal`,
+  `InternalInput`,
+  `Node`,
+  `NodeInput`,
+  `Query`,
+]

packages/gatsby/src/services/graphql-typegen.ts

@@ -0,0 +1,60 @@
+import reporter from "gatsby-cli/lib/reporter"
+import { EventObject } from "xstate"
+import { IBuildContext } from "../internal"
+import { IDataLayerContext, IQueryRunningContext } from "../state-machines"
+import {
+  writeGraphQLFragments,
+  writeGraphQLSchema,
+} from "../utils/graphql-typegen/file-writes"
+import { writeTypeScriptTypes } from "../utils/graphql-typegen/ts-codegen"
+
+export async function graphQLTypegen(
+  {
+    program,
+    store,
+    parentSpan,
+  }:
+    | Partial<IBuildContext>
+    | Partial<IQueryRunningContext>
+    | Partial<IDataLayerContext>,
+  _: EventObject,
+  {
+    src: { compile },
+  }: {
+    src: {
+      type: string
+      compile?: "all" | "schema" | "definitions"
+    }
+  }
+): Promise<void> {
+  if (!program || !store || !compile) {
+    reporter.panic(
+      `Missing required params in graphQLTypegen. program: ${!!program}. store: ${!!store}. compile: ${!!compile}`
+    )
+  }
+  const directory = program.directory
+
+  const activity = reporter.activityTimer(
+    `Generating GraphQL and TypeScript types`,
+    {
+      parentSpan,
+    }
+  )
+  activity.start()
+
+  if (compile === `all` || compile === `schema`) {
+    await writeGraphQLSchema(directory, store)
+    if (compile === `schema`) {
+      reporter.verbose(`Re-Generate GraphQL Schema types`)
+    }
+  }
+  if (compile === `all` || compile === `definitions`) {
+    await writeGraphQLFragments(directory, store)
+    await writeTypeScriptTypes(directory, store)
+    if (compile === `definitions`) {
+      reporter.verbose(`Re-Generate TypeScript types & GraphQL fragments`)
+    }
+  }
+
+  activity.end()
+}

packages/gatsby/src/services/index.ts

@@ -15,5 +15,6 @@ export { runPageQueries } from "./run-page-queries"
 export { waitUntilAllJobsComplete } from "../utils/wait-until-jobs-complete"
 export { runMutationBatch } from "./run-mutation-batch"
 export { recompile } from "./recompile"
+export { graphQLTypegen } from "./graphql-typegen"
 
 export * from "./types"

packages/gatsby/src/services/initialize.ts

@@ -26,6 +26,7 @@ import type { InternalJob } from "../utils/jobs/types"
 import { enableNodeMutationsDetection } from "../utils/detect-node-mutations"
 import { compileGatsbyFiles } from "../utils/parcel/compile-gatsby-files"
 import { resolveModule } from "../utils/module-resolver"
+import { writeGraphQLConfig } from "../utils/graphql-typegen/file-writes"
 
 interface IPluginResolution {
   resolve: string
@@ -658,6 +659,10 @@ export async function initialize({
 
   const workerPool = WorkerPool.create()
 
+  if (process.env.GATSBY_GRAPHQL_TYPEGEN) {
+    writeGraphQLConfig(program)
+  }
+
   return {
     store,
     workerPool,

packages/gatsby/src/services/types.ts

@@ -23,6 +23,7 @@ export interface IMutationAction {
 }
 
 export interface IBuildContext {
+  shouldRunInitialTypegen?: boolean
   program: IProgram
   store?: Store<IGatsbyState, AnyAction>
   parentSpan?: Span

packages/gatsby/src/state-machines/data-layer/index.ts

@@ -1,4 +1,4 @@
-import { Machine, StatesConfig, MachineOptions } from "xstate"
+import { createMachine, StatesConfig, MachineOptions } from "xstate"
 import { dataLayerActions } from "./actions"
 import { IDataLayerContext } from "./types"
 import { dataLayerServices } from "./services"
@@ -69,9 +69,26 @@ const recreatePagesStates: StatesConfig<IDataLayerContext, any, any> = {
     invoke: {
       id: `building-schema`,
       src: `buildSchema`,
+      onDone: [
+        {
+          target: `graphQLTypegen`,
+          cond: (): boolean => !!process.env.GATSBY_GRAPHQL_TYPEGEN,
+        },
+        {
+          target: `creatingPages`,
+        },
+      ],
+    },
+    exit: `assignGraphQLRunners`,
+  },
+  graphQLTypegen: {
+    invoke: {
+      src: {
+        type: `graphQLTypegen`,
+        compile: `schema`,
+      },
       onDone: {
         target: `creatingPages`,
-        actions: `assignGraphQLRunners`,
       },
     },
   },
@@ -115,7 +132,7 @@ const options: Partial<MachineOptions<IDataLayerContext, any>> = {
  * Machine used during first run
  */
 
-export const initializeDataMachine = Machine(
+export const initializeDataMachine = createMachine(
   {
     id: `initializeDataMachine`,
     context: {},
@@ -133,7 +150,7 @@ export const initializeDataMachine = Machine(
  * Machine used when we need to source nodes again
  */
 
-export const reloadDataMachine = Machine(
+export const reloadDataMachine = createMachine(
   {
     id: `reloadDataMachine`,
     context: {},
@@ -151,7 +168,7 @@ export const reloadDataMachine = Machine(
  * Machine used when we need to re-create pages after a
  * node mutation outside of sourceNodes
  */
-export const recreatePagesMachine = Machine(
+export const recreatePagesMachine = createMachine(
   {
     id: `recreatePagesMachine`,
     context: {},

packages/gatsby/src/state-machines/data-layer/services.ts

@@ -5,6 +5,7 @@ import {
   buildSchema,
   sourceNodes,
   writeOutRedirects as writeOutRedirectsAndWatch,
+  graphQLTypegen,
 } from "../../services"
 import { IDataLayerContext } from "./types"
 
@@ -17,4 +18,5 @@ export const dataLayerServices: Record<
   createPages,
   buildSchema,
   writeOutRedirectsAndWatch,
+  graphQLTypegen,
 }