feat(gatsby): Initial GraphQL Typegen Implementation (#35487)

Co-authored-by: Michal Piechowiak <[email protected]>

Author: LekoArts

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

@@ -25,7 +25,7 @@
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^5.2.1",
+    "react-helmet": "^6.1.0",
     "sass": "^1.32.8"
   },
   "keywords": [
@@ -35,7 +35,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_REFRESH_ENDPOINT=true GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND=y gatsby develop",
+    "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_REFRESH_ENDPOINT=true GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND=y GATSBY_GRAPHQL_TYPEGEN=y gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "start": "npm run develop",

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