refactor: remove nexus-decorators, add data context (#18211)

- Add `@packages/data-context`
- Add `yarn gulp makePackage` for scaffolding a new server package
- Removes `nexus-decorators` in favor of regular Nexus, creating better separation between data & schema
- Possible to launch project in different browser types

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Co-authored-by: Cesar <cesaravitia@outlook.com>

scripts/gulp/tasks/gulpGraphql.ts

@@ -4,7 +4,7 @@ import path from 'path'
 import pDefer from 'p-defer'
 import chalk from 'chalk'
 import fs from 'fs-extra'
-import { buildSchema, introspectionFromSchema } from 'graphql'
+import { buildSchema, extendSchema, GraphQLSchema, introspectionFromSchema, isObjectType, parse } from 'graphql'
 import { minifyIntrospectionQuery } from '@urql/introspection'
 
 import { nexusTypegen, watchNexusTypegen } from '../utils/nexusTypegenUtil'
@@ -99,19 +99,53 @@ export async function syncRemoteGraphQL () {
     // TODO(tim): fix
     await fs.ensureDir(path.join(monorepoPaths.pkgGraphql, 'src/gen'))
     await fs.promises.writeFile(path.join(monorepoPaths.pkgGraphql, 'schemas/cloud.graphql'), body)
-    await fs.promises.writeFile(path.join(monorepoPaths.pkgGraphql, 'src/gen/cloud-introspection.gen.json'), JSON.stringify(introspectionFromSchema(buildSchema(body)), null, 2))
   } catch {}
 }
 
-export async function printUrqlSchema () {
+/**
+ * Generates the schema so the urql GraphCache is
+ */
+export async function generateFrontendSchema () {
   const schemaContents = await fs.promises.readFile(path.join(monorepoPaths.pkgGraphql, 'schemas/schema.graphql'), 'utf8')
+  const schema = buildSchema(schemaContents, { assumeValid: true })
+  const testExtensions = generateTestExtensions(schema)
+  const extendedSchema = extendSchema(schema, parse(testExtensions))
 
   const URQL_INTROSPECTION_PATH = path.join(monorepoPaths.pkgFrontendShared, 'src/generated/urql-introspection.gen.ts')
 
   await fs.ensureDir(path.dirname(URQL_INTROSPECTION_PATH))
+  await fs.writeFile(path.join(monorepoPaths.pkgFrontendShared, 'src/generated/schema-for-tests.gen.json'), JSON.stringify(introspectionFromSchema(extendedSchema), null, 2))
 
   await fs.promises.writeFile(
     URQL_INTROSPECTION_PATH,
-    `/* eslint-disable */\nexport const urqlSchema = ${JSON.stringify(minifyIntrospectionQuery(introspectionFromSchema(buildSchema(schemaContents))), null, 2)} as const`,
+    `/* eslint-disable */\nexport const urqlSchema = ${JSON.stringify(minifyIntrospectionQuery(introspectionFromSchema(schema)), null, 2)} as const`,
   )
 }
+
+/**
+ * Adds two fields to the GraphQL types specific to testing
+ *
+ * @param schema
+ * @returns
+ */
+function generateTestExtensions (schema: GraphQLSchema) {
+  const objects: string[] = []
+  const typesMap = schema.getTypeMap()
+
+  for (const [typeName, type] of Object.entries(typesMap)) {
+    if (!typeName.startsWith('__') && isObjectType(type)) {
+      if (isObjectType(type)) {
+        objects.push(typeName)
+      }
+    }
+  }
+
+  return `
+    union TestUnion = ${objects.join(' | ')}
+
+    extend type Query {
+      testFragmentMember: TestUnion!
+      testFragmentMemberList: [TestUnion!]!
+    }
+  `
+}

scripts/gulp/tasks/gulpMakePackage.ts

@@ -57,6 +57,7 @@ export async function makePackage () {
           description: results.description,
           'main': 'index.js',
           'browser': 'src/index.ts',
+          'types': 'src/index.ts',
           scripts: {
             'build-prod': 'tsc || echo \'built, with errors\'',
             'check-ts': 'tsc --noEmit',

scripts/gulp/tasks/gulpTypeHelpers.ts

@@ -0,0 +1,55 @@
+// import path from 'path'
+// import fs from 'fs-extra'
+// import dedent from 'dedent'
+
+// import { monorepoPaths } from '../monorepoPaths'
+
+/**
+ * TODO(tim): revisit to see if this is useful
+ * Rather than copy-paste the Cypress d.ts into the @packages/types, we can regex out the ones we want -
+ * so we keep a single source of truth updated while getting the types we need for type-safety without
+ * leaking globals from everything into the server-side app
+ */
+// export async function extractCypressNamespacedTypes () {
+//   const cypressTypeFile = await fs.readFile(path.join(monorepoPaths.root, 'cli/types/cypress.d.ts'), 'utf8')
+//   const interfacesToExtract: Record<string, RegExp> = {
+//     RuntimeConfigOptions: /( +)interface RuntimeConfigOptions {((\s|.)*?)(\1)}\n\n/gm,
+//     ResolvedConfigOptions: /( +)interface ResolvedConfigOptions {((\s|.)*?)(\1)}\n\n/gm,
+//     Browser: /( +)interface Browser {((\s|.)*?)(\1)}\n\n/gm,
+//     RemoteState: /( +)interface RemoteState {((\s|.)*?)(\1)}\n\n/gm,
+//     Spec: /( +)interface Spec {((\s|.)*?)(\1)}\n\n/gm,
+//     ClientCertificate: /( +)interface ClientCertificate {((\s|.)*?)(\1)}\n\n/gm,
+//     PEMCert: /( +)interface PEMCert {((\s|.)*?)(\1)}\n\n/gm,
+//     PFXCert: /( +)interface PFXCert {((\s|.)*?)(\1)}\n\n/gm,
+//     BrowserName: /( +)type BrowserName = (.*?)\n/gm,
+//     BrowserChannel: /( +)type BrowserChannel = (.*?)\n/gm,
+//     BrowserFamily: /( +)type BrowserFamily = (.*?)\n/gm,
+//     CypressSpecType: /( +)type CypressSpecType = (.*?)\n/gm,
+//     scrollBehaviorOptions: /( +)type scrollBehaviorOptions = (.*?)\n/gm,
+//     TestingType: /( +)type TestingType = (.*?)\n/gm,
+//   }
+
+//   const typeDefs: string[] = []
+
+//   for (const key of Object.keys(interfacesToExtract).sort()) {
+//     const matched = cypressTypeFile.match(interfacesToExtract[key])
+
+//     if (!matched) {
+//       throw new Error(`Missing ${key} in extractCypressNamespacedTypes: ${__filename}`)
+//     }
+
+//     if (matched.length > 1) {
+//       throw new Error(`Mutliple matches for ${key} in extractCypressNamespacedTypes: ${__filename}`)
+//     }
+
+//     typeDefs.push(matched[0])
+//   }
+
+//   const typesToPrint = [
+//     typeDefs.map((def) => `// Auto-generated by ${__filename}, do not edit this type directly\nexport ${dedent(def)}\n`).join('\n'),
+//   ].join('\n')
+
+//   const fileContents = `type Nullable<T> = T | null\n\n${typesToPrint}`
+
+//   await fs.writeFile(path.join(monorepoPaths.pkgTypes, 'src/cypress-extracted.gen.ts'), fileContents)
+// }

scripts/gulp/tasks/gulpVite.ts

@@ -22,12 +22,14 @@ export function viteLaunchpad () {
 export function viteCleanApp () {
   return spawned('vite-clean', `yarn clean`, {
     cwd: monorepoPaths.pkgApp,
+    waitForExit: true,
   })
 }
 
 export function viteCleanLaunchpad () {
   return spawned('vite-clean', `yarn clean`, {
     cwd: monorepoPaths.pkgLaunchpad,
+    waitForExit: true,
   })
 }