Run GraphQL codegen concurrently with vite

README.md

@@ -219,19 +219,18 @@ graphql schema:
 python manage.py graphql_schema 
 ```
 
-On the client side you can (or even have to) run the following command to update the
+On the client side you have to run the following command to update the
 generated code
 
 ```bash
 npm run codegen
-
-# or in watch mode
-npm run codegen:watch
 ```
 
+💡 If you run `npm run dev`, the codegen command will be run automatically in watch mode."
+
 ### Open Questions
 
 - The `id` field has to be a string?
 - Is running `codegen` a prerequisite so that it even works?
 - What about the generated types from `codegen`? Hand written types seem to be better.
-- The functions is `cacheExchange` should be nearer the concrete implementation
+- The functions is `cacheExchange` should be nearer the concrete implementation

client/package-lock.json

@@ -62,6 +62,7 @@
         "@vue/test-utils": "^2.0.2",
         "@vue/tsconfig": "^0.1.3",
         "autoprefixer": "^10.4.8",
+        "concurrently": "^8.0.1",
         "eslint": "8.37",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-cypress": "^2.13.3",
@@ -9133,6 +9134,48 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/concurrently": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.0.1.tgz",
+      "integrity": "sha512-Sh8bGQMEL0TAmAm2meAXMjcASHZa7V0xXQVDBLknCPa9TPtkY9yYs+0cnGGgfdkW0SV1Mlg+hVGfXcoI8d3MJA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.0",
+        "shell-quote": "^1.8.0",
+        "spawn-command": "0.0.2-1",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.1"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -10025,6 +10068,22 @@
       "integrity": "sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -17315,6 +17374,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
+      "dev": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -18240,6 +18305,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/trough": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
@@ -26587,6 +26661,34 @@
         }
       }
     },
+    "concurrently": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.0.1.tgz",
+      "integrity": "sha512-Sh8bGQMEL0TAmAm2meAXMjcASHZa7V0xXQVDBLknCPa9TPtkY9yYs+0cnGGgfdkW0SV1Mlg+hVGfXcoI8d3MJA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.0",
+        "shell-quote": "^1.8.0",
+        "spawn-command": "0.0.2-1",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.1"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -27241,6 +27343,15 @@
       "integrity": "sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
     "dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -32729,6 +32840,12 @@
       "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
       "dev": true
     },
+    "spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -33448,6 +33565,12 @@
         "punycode": "^2.3.0"
       }
     },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true
+    },
     "trough": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",

client/package.json

@@ -9,7 +9,7 @@
     "codegen:watch": "graphql-codegen --watch",
     "coverage": "vitest run --coverage",
     "cypress:open": "cypress open",
-    "dev": "vite",
+    "dev": "concurrently \"vite\" \"npm run codegen:watch\"",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "prettier": "prettier . --write",
     "prettier:check": "prettier . --check",
@@ -74,6 +74,7 @@
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.8",
+    "concurrently": "^8.0.1",
     "eslint": "8.37",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.13.3",