feat: Add graphql to unified-desktop branch (cypress-io#17305)

* refactor: use getPathToDesktopIndex for launchpad path * chore: add dependencies for graphql * Get GraphQL & Vue working together * update vue and remove need for patch-package * add apollo example * Update Wizard.vue * Add prebuild * update types * update tests * use debug instead of console.log * skip test * close gql server * fix server unit tests * try changing policies * try to install angular via package.json injection * update command * move graphql-codegen to dependencies * update package.json * bump deps * add gql * update build * add codegen.yml to build * add schema to build * include src for launchpad Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
tiago80673 · Jul 20, 2021 · 1550733 · 1550733
1 parent 1a9f123
commit 1550733
Show file tree

Hide file tree

Showing 35 changed files with 1,947 additions and 243 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,6 +53,10 @@ packages/server/test/support/fixtures/server/libs
 # from runner-ct
 /packages/runner-ct/cypress/screenshots
 
+# graphql, auto-generated
+/packages/server/lib/graphql/gen/nxs.gen.ts
+/packages/launchpad/src/generated
+
 # from npm/create-cypress-tests
 /npm/create-cypress-tests/initial-template
 /npm/create-cypress-tests/src/test-output

diff --git a/circle.yml b/circle.yml
@@ -1448,7 +1448,7 @@ jobs:
             command: yarn workspace @cypress/schematic build:all
         - run:
             name: Install @angular/cli
-            command: yarn policies set-version 1.19.0 && yarn add --dev @angular/cli
+            command: yarn add:angular-cli
             working_directory: npm/cypress-schematic
         - run:
             name: Launch

diff --git a/npm/cypress-schematic/add-angular-cli-dev.js b/npm/cypress-schematic/add-angular-cli-dev.js
@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+const fs = require('fs')
+const execa = require('execa')
+
+async function main () {
+  try {
+    const pkg = require('./package.json')
+
+    console.log('Adding @angular/cli to package.json')
+    pkg['devDependencies']['@angular/cli'] = '11.2.12'
+    fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2))
+
+    console.log('Running yarn install')
+    await execa('yarn', ['install'], { stdout: 'inherit' })
+  } catch (e) {
+    if (e.stdout) {
+      console.error(e.stdout)
+    }
+
+    const exitCode = e.exitCode ? e.exitCode : 1
+
+    console.error(`Failed to add @angular/cli with exit code ${exitCode}`)
+    process.exit(exitCode)
+  }
+}
+
+// execute main function if called from command line
+if (require.main === module) {
+  main()
+}
diff --git a/npm/cypress-schematic/package.json b/npm/cypress-schematic/package.json
@@ -5,6 +5,7 @@
   "private": false,
   "main": "./src",
   "scripts": {
+    "add:angular-cli": "node ./add-angular-cli-dev.js",
     "build": "tsc -p tsconfig.json",
     "build:test": "tsc -p tsconfig.spec.json",
     "build:all": "tsc -p tsconfig.json && tsc -p tsconfig.spec.json",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@angular-devkit/schematics-cli": "^12.0.0",
+    "@angular/cli": "11.2.12",
     "@types/chai-enzyme": "0.6.7",
     "@types/mocha": "8.0.3",
     "@types/node": "^12.11.1",
@@ -58,4 +60,4 @@
     "save": "devDependencies"
   },
   "schematics": "./src/schematics/collection.json"
-}
+}
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "cypress:run:debug": "node ./scripts/debug.js cypress:run",
     "cypress:verify": "cypress verify --dev",
     "dev": "node ./scripts/start.js",
+    "dev:watch": "node ./scripts/watch.js",
     "dev-debug": "node ./scripts/debug.js dev",
     "docker": "./scripts/run-docker-local.sh",
     "effective:circle:config": "circleci config process circle.yml | sed /^#/d",
@@ -140,6 +141,7 @@
     "glob": "7.1.6",
     "globby": "10.0.1",
     "got": "11.5.1",
+    "graphql": "^15.5.1",
     "gulp": "4.0.2",
     "gulp-awspublish": "4.0.0",
     "gulp-debug": "4.0.0",

diff --git a/packages/electron/lib/electron.js b/packages/electron/lib/electron.js
@@ -135,7 +135,7 @@ module.exports = {
         argv.push('--enable-logging')
       }
 
-      return cp.spawn(execPath, argv, { stdio: 'inherit' })
+      const spawned = cp.spawn(execPath, argv, { stdio: 'inherit' })
       .on('close', (code, signal) => {
         debug('electron closing %o', { code, signal })
 
@@ -154,6 +154,18 @@ module.exports = {
 
         return process.exit(code)
       })
+
+      if (process.argv.includes('--devWatch')) {
+        spawned.on('exit', () => {
+          process.exit(0)
+        })
+
+        process.on('exit', () => {
+          spawned.kill(9)
+        })
+      }
+
+      return spawned
     }).catch((err) => {
       // eslint-disable-next-line no-console
       console.debug(err.stack)

diff --git a/packages/launchpad/graphql-codegen.yml b/packages/launchpad/graphql-codegen.yml
@@ -0,0 +1,19 @@
+overwrite: true
+schema: '../server/schema.graphql'
+documents: 'src/**/*.vue'
+generates:
+  src/generated/graphql.tsx:
+    config:
+      immutableTypes: true
+      useTypeImports: true
+      preResolveTypes: true
+      onlyOperationTypes: true
+      avoidOptionals: true
+      enumsAsTypes: true
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typed-document-node'
+hooks:
+  afterOneFileWrite:
+    - eslint --fix
diff --git a/packages/launchpad/lib/.eslintrc.json b/packages/launchpad/lib/.eslintrc.json
diff --git a/packages/launchpad/lib/gui.d.ts b/packages/launchpad/lib/gui.d.ts
diff --git a/packages/launchpad/lib/gui.js b/packages/launchpad/lib/gui.js
diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
@@ -2,8 +2,8 @@
   "name": "@packages/launchpad",
   "version": "0.0.0-development",
   "private": true,
-  "main": "lib/gui.js",
   "scripts": {
+    "prebuild": "yarn codegen",
     "build": "vite build",
     "build-prod": "cross-env NODE_ENV=production yarn build",
     "clean-deps": "rm -rf node_modules",
@@ -12,33 +12,47 @@
     "cypress:open:ct": "cross-env TZ=America/New_York node ../../scripts/cypress open-ct --project ${PWD}",
     "cypress:run:ct": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
     "dev": "LAUNCHPAD=1 yarn start-test 5050 cypress:open",
-    "postinstall": "echo '@packages/launchpad needs: yarn build'",
+    "postinstall": "yarn codegen && echo '@packages/launchpad needs: yarn build'",
     "start": "http-server -p 5050 dist",
-    "watch": "yarn build --watch"
+    "watch": "yarn build --watch",
+    "codegen": "graphql-codegen --config ${PWD}/graphql-codegen.yml"
   },
   "dependencies": {
     "bluebird": "3.5.3",
     "classnames": "2.3.1",
     "vue": "3.1.1"
   },
   "devDependencies": {
+    "@apollo/client": "^3.3.21",
     "@cypress/vue": "0.0.0-development",
+    "@graphql-codegen/cli": "^1.21.6",
+    "@graphql-codegen/typed-document-node": "^1.18.9",
+    "@graphql-codegen/typescript": "^1.22.4",
+    "@graphql-codegen/typescript-operations": "^1.18.3",
+    "@graphql-typed-document-node/core": "^3.1.0",
     "@iconify/json": "1.1.368",
     "@iconify/vue": "3.0.0-beta.1",
     "@vitejs/plugin-vue": "1.2.4",
     "@vitejs/plugin-vue-jsx": "1.1.6",
+    "@vue/apollo-composable": "4.0.0-alpha.12",
+    "bluebird": "3.5.3",
+    "classnames": "2.3.1",
     "cross-env": "6.0.3",
+    "graphql": "^15.5.1",
+    "graphql-tag": "^2.12.5",
     "prismjs": "1.24.0",
     "vite": "2.4.1",
     "vite-plugin-components": "0.11.3",
     "vite-plugin-icons": "0.6.3",
     "vite-plugin-windicss": "1.2.4",
+    "vue": "3.1.0",
     "vue-prism-component": "2.0.0",
     "vue-tsc": "0.0.24",
     "windicss": "3.1.4"
   },
   "files": [
     "dist",
-    "lib"
+    "graphql-codegen.yml",
+    "src"
   ]
 }
diff --git a/packages/launchpad/script/build-schema.js b/packages/launchpad/script/build-schema.js
@@ -0,0 +1,3 @@
+process.env.GRAPHQL_CODEGEN = 'true'
+require('@packages/ts/register')
+require('../../server/lib/graphql/schema')
diff --git a/packages/launchpad/src/App.vue b/packages/launchpad/src/App.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script lang="ts">
+import { provideApolloClient } from '@vue/apollo-composable'
+import { apolloClient } from './graphql/apolloClient'
 import { defineComponent } from "vue";
 import Layout from "./components/Layout.vue";
 import Wizard from "./components/Wizard.vue";
@@ -15,5 +17,8 @@ export default defineComponent({
     Layout,
     Wizard,
   },
+  setup() {
+    provideApolloClient(apolloClient)
+  }
 });
 </script>
diff --git a/packages/launchpad/src/components/Wizard.vue b/packages/launchpad/src/components/Wizard.vue
@@ -16,14 +16,26 @@
     </template>
   </div>
 </template>
+
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, watch } from "vue";
 import { useStoreApp } from "../store/app";
 import TestingType from "./TestingType.vue";
 import EnvironmentSetup from "./EnvironmentSetup.vue";
 import InstallDependencies from "./InstallDependencies.vue";
 import ConfigFile from "./ConfigFile.vue";
 import OpenBrowser from "./OpenBrowser.vue";
+import { gql } from '@apollo/client'
+import { WizardDocument } from '../generated/graphql'
+import { useQuery } from "@vue/apollo-composable";
+
+gql`
+query Wizard {
+  app {
+    isFirstOpen
+  }
+}
+`
 
 export default defineComponent({
   components: {
@@ -32,15 +44,25 @@ export default defineComponent({
     InstallDependencies,
     ConfigFile,
     OpenBrowser,
-},
+  },
   setup() {
     const storeApp = useStoreApp();
 
     const title = computed(() => storeApp.getState().title)
     const description = computed(() => storeApp.getState().description)
     const steps = computed(() => storeApp.getState().steps)
 
-    return { steps, title, description };
+    const { onResult, result, loading } = useQuery(WizardDocument, {})
+
+    onResult((result) => {
+      console.log(result)
+    })
+
+    watch(result, value => {
+      console.log(value)
+    })
+
+    return { steps, title, description, loading, result };
   },
 });
 </script>
diff --git a/packages/launchpad/src/graphql/apolloClient.ts b/packages/launchpad/src/graphql/apolloClient.ts
@@ -0,0 +1,25 @@
+import { ApolloLink, FetchResult, ApolloClient, InMemoryCache, Observable } from '@apollo/client/core'
+import { fetchGraphql } from './graphqlIpc'
+
+const ipcLink = new ApolloLink((op) => {
+  return new Observable((obs) => {
+    fetchGraphql(op).then((result) => {
+      obs.next(result as FetchResult)
+      obs.complete()
+
+      return result
+    }).catch((err) => {
+      obs.error(err)
+      obs.complete()
+    })
+  })
+})
+
+// Cache implementation
+const cache = new InMemoryCache()
+
+// Create the apollo client
+export const apolloClient = new ApolloClient({
+  link: ipcLink,
+  cache,
+})
diff --git a/packages/launchpad/src/graphql/graphqlIpc.ts b/packages/launchpad/src/graphql/graphqlIpc.ts
@@ -0,0 +1,52 @@
+import pDefer from 'p-defer'
+import type { Operation } from '@apollo/client'
+import { print } from 'graphql'
+
+export const ipcInFlight = new Map<string, pDefer.DeferredPromise<any>>()
+
+interface GraphQLResponseShape {
+  id: string
+  result: any
+}
+
+// @ts-expect-error
+ipc.on('graphql:response', (event, obj: GraphQLResponseShape) => {
+  const dfd = ipcInFlight.get(obj.id)
+
+  if (!dfd) {
+    throw new Error('Missing ipcInFlight')
+  }
+
+  if (obj.result.errors) {
+    // console.log(obj.result)
+  }
+
+  dfd.resolve(obj.result)
+})
+
+// Relay passes a "params" object with the query name and text. So we define
+// a helper function to call our fetchGraphQL utility with params.text
+export const fetchGraphql = async function fetchGraphql (
+  op: Operation,
+) {
+  const dfd = pDefer()
+  const ipcId = Math.random().toString()
+
+  dfd.promise.finally(() => {
+    ipcInFlight.delete(ipcId)
+  })
+
+  ipcInFlight.set(ipcId, dfd)
+
+  // @ts-expect-error
+  ipc.send('graphql', {
+    id: ipcId,
+    params: {
+      text: print(op.query),
+      name: op.operationName,
+    },
+    variables: op.variables,
+  })
+
+  return dfd.promise
+}
diff --git a/packages/launchpad/vite.config.ts b/packages/launchpad/vite.config.ts
@@ -7,6 +7,13 @@ import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 
 export default defineConfig({
   base: './',
+  build: {
+    minify: false,
+  },
+  optimizeDeps: {
+    include: ['@apollo/client/core'],
+    exclude: ['@apollo/client'],
+  },
   plugins: [
     vue(),
     vueJsx(),