feat: merging / delegating remote queries to cloud schema (#17875)

Changes:
- Pulls down & stitches in the "Cypress Cloud" schema from remote. Currently defaulted to "staging" so we can make quick fixes / iteration there
- Add dedicated type checking CircleCI job `check-ts`
- Adds [graphcache](https://formidable.com/open-source/urql/docs/graphcache/) to normalize the cache & provide better auto-reactivity when data changes
- Removes `LocalProject` / `DashboardProject` in favor of `Project` / `CloudProject`
- General cleanup of Vue components' GraphQL fragments
- Parallelizes launchpad tests & recording to new Cypress project: https://dashboard.cypress.io/projects/sehy69/runs
  - Did this b/c tests were frequently timing out, need to figure out the source of this
- Basic mocks for remote schema

.gitignore

@@ -55,6 +55,7 @@ packages/server/test/support/fixtures/server/libs
 
 # graphql, auto-generated
 /packages/launchpad/src/generated
+/packages/app/src/generated
 
 # from npm/create-cypress-tests
 /npm/create-cypress-tests/initial-template
@@ -343,3 +344,7 @@ $RECYCLE.BIN/
 
 # Circle cache artifacts
 globbed_node_modules
+
+# Autogenerated files, typically from graphql-code-generator
+*.gen.ts
+*.gen.json

apollo.config.js

@@ -1,12 +1,14 @@
+const path = require('path')
+
 // For use with Apollo Extension for VSCode:
 // https://www.apollographql.com/docs/devtools/editor-plugins/
 module.exports = {
   client: {
     service: {
       name: 'cypress-io',
-      localSchemaFile: './packages/graphql/schema.graphql',
+      localSchemaFile: path.join(__dirname, 'packages/graphql/schemas/schema.graphql'),
     },
     tagName: 'gql',
-    includes: ['./packages/launchpad/src/**/*.vue'],
+    includes: [path.join(__dirname, 'packages/launchpad/src/**/*.vue')],
   },
 }

autobarrel.json

@@ -2,5 +2,10 @@
   "prefix": "/* eslint-disable padding-line-between-statements */",
   "paths": [
     "packages/graphql/src/**/*"
+  ],
+  "ignore": [
+    "packages/graphql/src/stitching",
+    "packages/graphql/src/testing",
+    "packages/graphql/src/gen"
   ]
 }

circle.yml

@@ -117,6 +117,9 @@ commands:
   build-and-persist:
     description: Save entire folder as artifact for other jobs to run without reinstalling
     steps:
+      - run:
+          name: Build all codegen
+          command: yarn gulp buildProd
       - run:
           name: Build packages
           command: yarn build
@@ -389,8 +392,11 @@ commands:
         type: string
     steps:
       - restore_cached_workspace
-      - run: yarn gulp graphqlCodegen
-      - run: yarn workspace @packages/launchpad cypress:run --browser <<parameters.browser>>
+      - run: 
+          command: |
+            CYPRESS_KONFIG_ENV=production \
+            CYPRESS_RECORD_KEY=$TEST_LAUNCHPAD_RECORD_KEY \
+            yarn workspace @packages/launchpad cypress:run --browser <<parameters.browser>> --record --parallel
       - store_test_results:
           path: /tmp/cypress
       - store_artifacts:
@@ -934,6 +940,16 @@ jobs:
           command: node cli/bin/cypress info --dev
       - store-npm-logs
 
+  check-ts:
+    <<: *defaults
+    steps:
+      - restore_cached_workspace
+      - install-required-node
+      - run:
+          name: Check TS Types
+          command: yarn gulp checkTs
+
+
   # a special job that keeps polling Circle and when all
   # individual jobs are finished, it closes the Percy build
   percy-finalize:
@@ -1002,8 +1018,6 @@ jobs:
       - run: yarn test-scripts
       # make sure our snapshots are compared correctly
       - run: yarn test-mocha-snapshot
-      # Get the codegen output
-      - run: yarn gulp buildProd
       # make sure packages with TypeScript can be transpiled to JS
       - run: yarn lerna run build-prod --stream
       # run unit tests from each individual package
@@ -1153,7 +1167,7 @@ jobs:
 
   run-launchpad-integration-tests-chrome:
     <<: *defaults
-    parallelism: 1
+    parallelism: 3
     steps:
       - run-launchpad-integration-tests:
           browser: chrome
@@ -1981,6 +1995,9 @@ linux-workflow: &linux-workflow
     - build:
         requires:
           - node_modules_install
+    - check-ts:
+        requires:
+          - build
     - lint:
         name: Linux lint
         requires:
@@ -2047,6 +2064,7 @@ linux-workflow: &linux-workflow
         requires:
           - build
     - run-launchpad-integration-tests-chrome:
+        context: test-runner:launchpad-tests
         requires:
           - build
 
@@ -2105,6 +2123,7 @@ linux-workflow: &linux-workflow
         context: test-runner:npm-release
         requires:
           - build
+          - check-ts
           - npm-eslint-plugin-dev
           - npm-create-cypress-tests
           - npm-react

cli/lib/exec/spawn.js

@@ -118,6 +118,9 @@ module.exports = {
         }
 
         // strip dev out of child process options
+        /**
+         * @type {import('child_process').ForkOptions}
+         */
         let stdioOptions = _.pick(options, 'env', 'detached', 'stdio')
 
         // figure out if we're going to be force enabling or disabling colors.
@@ -154,7 +157,12 @@ module.exports = {
         let child
 
         if (process.env.CYPRESS_INTERNAL_DEV_WATCH) {
+          if (process.env.CYPRESS_INTERNAL_DEV_DEBUG) {
+            stdioOptions.execArgv = [process.env.CYPRESS_INTERNAL_DEV_DEBUG]
+          }
+
           debug('spawning Cypress as fork: %s', startScriptPath)
+
           child = cp.fork(startScriptPath, args, stdioOptions)
           process.on('message', (msg) => {
             child.send(msg)

graphql-codegen.yml

@@ -1,37 +1,93 @@
+# https://www.graphql-code-generator.com/docs/getting-started/index
+
+documentFilters: &documentFilters
+  immutableTypes: true
+  useTypeImports: true
+  preResolveTypes: true
+  onlyOperationTypes: true
+  avoidOptionals: true
+  strictScalars: true
+  scalars: 
+    Date: string
+    DateTime: string
+    JSON: any
+
+vueOperations: &vueOperations
+  schema: './packages/graphql/schemas/schema.graphql'
+  config:
+    <<: *documentFilters
+  plugins:
+    - add:
+        content: '/* eslint-disable */'
+    - 'typescript'
+    - 'typescript-operations'
+    - 'typed-document-node':
+        # Intentionally specified under typed-document-node rather than top level config,
+        # becuase we don't want it flattening the types for the operations
+        flattenGeneratedTypes: true
+
+vueTesting: &vueTesting
+  schema: './packages/graphql/schemas/schema.graphql'
+  config:
+    <<: *documentFilters
+  plugins:
+    - add:
+        content: '/* eslint-disable */'
+    - 'typescript'
+    - 'typescript-operations'
+    - 'typed-document-node'
+
 overwrite: true
-schema: './packages/graphql/schema.graphql'
+config:
+  enumsAsTypes: true
+  declarationKind: 'interface'
 generates:
-  './packages/app/src/generated/graphql.ts':
-    documents: './packages/app/src/**/*.vue'
-    config:
-      immutableTypes: true
-      useTypeImports: true
-      preResolveTypes: true
-      onlyOperationTypes: true
-      avoidOptionals: true
-      enumsAsTypes: true
+  ###
+  # Generates types for us to infer the correct "source types" when we merge the 
+  # remote schema cloud.graphql schema into Nexus. This ensures we have proper type checking
+  # when we're using cy.mountFragment in component tests
+  ###
+  './packages/graphql/src/gen/cloud-source-types.gen.ts':
+    schema: 'packages/graphql/schemas/cloud.graphql'
     plugins:
       - add:
           content: '/* eslint-disable */'
       - 'typescript':
-      - 'typescript-operations'
-      - 'typed-document-node'
+          nonOptionalTypename: true
+      - 'packages/graphql/script/codegen-type-map.js'
+
+  ###
+  # All of the GraphQL Query/Mutation documents we import for use in the .vue
+  # files for useQuery / useMutation, as well as types associated with the fragments
+  ###
   './packages/launchpad/src/generated/graphql.ts':
     documents: './packages/launchpad/src/**/*.vue'
-    config:
-      immutableTypes: true
-      useTypeImports: true
-      preResolveTypes: true
-      onlyOperationTypes: true
-      avoidOptionals: true
-      enumsAsTypes: true
-    plugins:
-      - add:
-          content: '/* eslint-disable */'
-      - 'typescript':
-      - 'typescript-operations'
-      - 'typed-document-node'
+    <<: *vueOperations
+
+  './packages/app/src/generated/graphql.ts':
+    documents: './packages/app/src/**/*.vue'
+    <<: *vueOperations
+
+  ###
+  # All GraphQL documents imported into the .spec.tsx files for component testing.
+  # Similar to generated/graphql.ts, except it doesn't include the flattening for the document nodes,
+  # so we can actually use the document in cy.mountFragment
+  ###
+  './packages/launchpad/src/generated/graphql-test.ts':
+    documents: './packages/launchpad/src/**/*.vue'
+    <<: *vueTesting
+
+  './packages/app/src/generated/graphql-test.ts':
+    documents: './packages/app/src/**/*.vue'
+    <<: *vueTesting
+
+  ###
+  # A Custom GraphQL Code generator (codegen-mount.js), producing a GraphQL type which represents the "union"
+  # of all possible output types. This is exposed as `testFragmentMember` / `testFragmentMemberList`
+  # fields, and are used in testing components, so we can generate a type that fulfills a fragment
+  ###
   './packages/graphql/src/testing/testUnionType.ts':
+    schema: './packages/graphql/schemas/schema.graphql'
     plugins:
       - add:
           content: '/* eslint-disable */'

npm/eslint-plugin-dev/lib/index.js

@@ -116,7 +116,7 @@ const baseRules = {
   'no-unneeded-ternary': 'error',
   'no-unreachable': 'error',
   'no-unused-labels': 'error',
-  'no-unused-vars': ['error', { args: 'none' }],
+  'no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
   'no-useless-concat': 'error',
   'no-useless-constructor': 'error',
   'no-var': 'error',
@@ -269,10 +269,13 @@ module.exports = {
           rules: {
             'no-undef': 'off',
             'no-unused-vars': 'off',
+            'no-useless-constructor': 'off',
             '@typescript-eslint/no-unused-vars': [
               'error',
               {
                 'args': 'none',
+                'ignoreRestSiblings': true,
+                'argsIgnorePattern': '^_',
               },
             ],
             '@typescript-eslint/type-annotation-spacing': 'error',

npm/mount-utils/package.json

@@ -4,8 +4,9 @@
   "description": "Shared utilities for the various component testing adapters",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc",
-    "build-prod": "tsc",
+    "build": "tsc || echo 'built, with type errors'",
+    "build-prod": "tsc || echo 'built, with type errors'",
+    "check-ts": "tsc --noEmit",
     "watch": "tsc -w"
   },
   "dependencies": {},

npm/vite-dev-server/package.json

@@ -4,8 +4,9 @@
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {
-    "build": "tsc",
-    "build-prod": "tsc",
+    "build": "tsc || echo 'built, with type errors'",
+    "build-prod": "tsc || echo 'built, with type errors'",
+    "check-ts": "tsc --noEmit",
     "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
     "test": "yarn cy:run",

npm/vite-dev-server/vite.config.ts

@@ -5,4 +5,7 @@ export default defineConfig({
   plugins: [
     vue(),
   ],
+  define: {
+    'process.env': {},
+  },
 })

npm/vue/package.json

@@ -53,7 +53,7 @@
     "vue-loader": "16.1.2",
     "vue-router": "^4.0.0",
     "vue-style-loader": "4.1.2",
-    "vue-tsc": "0.2.2",
+    "vue-tsc": "^0.3.0",
     "vuex": "^4.0.0",
     "webpack": "4.42.0"
   },

npm/webpack-dev-server/package.json

@@ -4,8 +4,9 @@
   "description": "Launches Webpack Dev Server for Component Testing",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc",
-    "build-prod": "tsc",
+    "build": "tsc || echo 'built, with type errors'",
+    "build-prod": "tsc || echo 'built, with type errors'",
+    "check-ts": "tsc --noEmit",
     "test": "node ./test-wds-3.js",
     "test-all": "tsc && mocha -r @packages/ts/register test/**/*.spec.ts test/*.spec.ts --exit",
     "watch": "tsc -w"

npm/webpack-preprocessor/package.json

@@ -5,7 +5,7 @@
   "private": false,
   "main": "dist",
   "scripts": {
-    "build": "shx rm -rf dist && tsc",
+    "build": "shx rm -rf dist && tsc || echo 'built, with errors'",
     "build-prod": "yarn build",
     "deps": "deps-ok && dependency-check --no-dev .",
     "secure": "nsp check",
@@ -16,7 +16,7 @@
     "test-e2e": "mocha test/e2e/*.spec.*",
     "test-unit": "mocha test/unit/*.spec.*",
     "test-watch": "yarn test-unit & chokidar '**/*.(js|ts)' 'test/unit/*.(js|ts)' -c 'yarn test-unit'",
-    "types": "tsc --noEmit",
+    "check-ts": "tsc --noEmit",
     "watch": "yarn build --watch"
   },
   "dependencies": {

package.json

@@ -4,7 +4,6 @@
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {
-    "prebinary-build": "yarn gulp buildProd",
     "binary-build": "node ./scripts/binary.js build",
     "binary-deploy": "node ./scripts/binary.js deploy",
     "binary-deploy-linux": "./scripts/build-linux-binary.sh",
@@ -14,12 +13,12 @@
     "binary-upload": "node ./scripts/binary.js upload",
     "binary-zip": "node ./scripts/binary.js zip",
     "build": "lerna run build --stream --no-bail --ignore create-cypress-tests && lerna run build --stream --scope create-cypress-tests",
-    "prebuild-prod": "yarn gulp buildProd",
     "build-prod": "lerna run build-prod --stream --ignore create-cypress-tests && lerna run build-prod --stream --scope create-cypress-tests",
     "bump": "node ./scripts/binary.js bump",
     "check-node-version": "node scripts/check-node-version.js",
     "check-terminal": "node scripts/check-terminal.js",
     "clean": "lerna run clean --parallel",
+    "check-ts": "yarn gulp checkTs",
     "clean-deps": "find . -depth -name node_modules -type d -exec rm -rf {} \\;",
     "clean-untracked-files": "git clean -d -f",
     "precypress:open": "yarn ensure-deps",
@@ -118,6 +117,7 @@
     "@types/through2": "^2.0.36",
     "@typescript-eslint/eslint-plugin": "4.18.0",
     "@typescript-eslint/parser": "4.18.0",
+    "@urql/introspection": "^0.3.0",
     "ansi-styles": "3.2.1",
     "arg": "4.1.2",
     "ascii-table": "0.0.9",