shazam! begone codegen from the codebase, now you're elsewhere

codegen/01-entrypoint.sh

+#!/bin/bash
+
+# WARNING: This script is meant for Docker Compose execution in docker/schema-gen, do not run it directly
+
+# schemas folder must be present
+if [ ! -d "./schemas" ]; then
+  echo "Codegen: `schemas` folder not found"
+  exit 1
+fi
+
+# gql folder must be present
+if [ ! -d "../gql" ]; then
+  echo "Codegen: `gql` folder not found"
+  exit 1
+fi
+
+mkdir -p ./gql-cache
+# copy all files from gql folder to gql-cache folder, prevent gql being prefixed
+cp -r ../gql/* ./gql-cache
+
+# list out graphql schema files in schemas dir
+SCHEMA_FILES=$(find ./schemas -type f -name "*.graphql")
+# echo them out
+echo "Codegen: Found schema files: $SCHEMA_FILES"
+
+# generate typescript types from graphql schema
+yarn exec graphql-codegen --config codegen.ts
+
+FILES=$(find ./gql-cache -type f -name "*.ts")
+echo $FILES
+
+# move all .ts files from gql folder to generated folder recursively while keeping their paths and removing gql-cache/gql prefix
+for FILE in $FILES; do
+  DEST_FILE=$(echo $FILE | sed 's/gql-cache/generated/g')
+  mkdir -p $(dirname $DEST_FILE)
+  mv $FILE $DEST_FILE
+  # sed the $DEST_FILE contents to replace `import type * as _Types from '../../types';` to `import type * as _Types from './types';`
+  # this should be generic on the number of `../` in the import statement
+done
+
+rm -rf ./gql-cache
+
+echo "Codegen: Done"
+ 
+#The script is pretty straightforward. It checks if the  schemas  and  gql  folders are present. If they are, it runs the codegen script. After the codegen script is done, it moves all the generated files from the  gql  folder to the  generated  folder. 
+# The codegen script is a simple script that uses the  graphql-codegen  package to generate typescript types from the graphql schema. 
+# Path: codegen/codegen.ts
\ No newline at end of file

codegen/Dockerfile

+FROM node:20 as INSTALL
+
+# Create app directory
+
+WORKDIR /usr/src/app
+
+# Install app dependencies
+
+COPY package.json yarn.lock ./
+
+RUN yarn install --immutable --inline-builds
+
+COPY codegen.ts 01-entrypoint.sh ./
+
+ENTRYPOINT [ "/bin/bash", "01-entrypoint.sh" ]
\ No newline at end of file

graphql/codegen.ts → codegen/codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli'
-import { httpGraphql } from '@inject/shared/config'
 
 const config: CodegenConfig = {
-  schema: [httpGraphql(import.meta.env.VITE_HTTP_HOST), 'localSchema.graphql'],
+  schema: ['schemas/schema.json', 'schemas/*.graphql'],
   documents: [
-    'fragments/**/*.graphql',
-    'queries/**/*.graphql',
-    'subscriptions/**/*.graphql',
-    'mutations/**/*.graphql',
+    'gql-cache/**/*.graphql',
   ],
   verbose: true,
   ignoreNoDocuments: true, // for better experience with the watcher
@@ -24,13 +20,13 @@ const config: CodegenConfig = {
     useTypeImports: true,
   },
   generates: {
-    './graphql.schema.json': {
+    './generated/graphql.schema.json': {
       plugins: ['introspection'],
       config: {
         minify: false,
       },
     },
-    './types.ts': {
+    './gql-cache/types.ts': {
       config: {
         useIndexSignature: true,
         showUnusedMappers: false,
@@ -53,7 +49,7 @@ const config: CodegenConfig = {
         'typescript-resolvers',
       ],
     },
-    './schema.ts': {
+    './gql-cache/schema.ts': {
       plugins: [
         'typescript-operations',
         'typescript-react-apollo',
@@ -72,7 +68,6 @@ const config: CodegenConfig = {
       presetConfig: {
         baseTypesPath: '../types.ts',
         importTypesNamespace: '_Types',
-        // cwd: "./src/graphql/"
       },
       config: {
         documentMode: 'documentNode',
@@ -88,7 +83,7 @@ const config: CodegenConfig = {
         omitOperationSuffix: true,
       },
     },
-    'client/apollo-helpers.ts': {
+    './generated/client/apollo-helpers.ts': {
       plugins: [
         {
           add: {

codegen/package.json

+{
+    "name": "@inject/codegen",
+    "version": "0.3.0",
+    "description": "GraphQL API Codegen Setup for the Inject Backend",
+    "main": "index.js",
+    "dependencies": {
+        "@apollo/client": "3.9.7",
+        "graphql": "16.8.1",
+        "graphql-tag": "2.12.6"
+    },
+    "devDependencies": {
+        "@graphql-codegen/add": "5.0.2",
+        "@graphql-codegen/cli": "5.0.2",
+        "@graphql-codegen/import-types-preset": "3.0.0",
+        "@graphql-codegen/introspection": "4.0.3",
+        "@graphql-codegen/named-operations-object": "3.0.0",
+        "@graphql-codegen/near-operation-file-preset": "3.0.0",
+        "@graphql-codegen/typescript": "4.0.6",
+        "@graphql-codegen/typescript-apollo-client-helpers": "^3.0.0",
+        "@graphql-codegen/typescript-operations": "4.2.0",
+        "@graphql-codegen/typescript-react-apollo": "4.3.0",
+        "@graphql-codegen/typescript-resolvers": "^4.0.6"
+    }
+}

docker/schema-gen/docker-compose.yml

+version: '2'
+
+services:
+  backend-gen:
+    build:
+      context: ../../backend
+      dockerfile: Dockerfile
+    volumes:
+      - type: bind
+        source: ../../graphql/schemas
+        target: /backend/schemasLocal
+        read_only: true
+      - type: volume
+        source: schemas
+        target: /backend/schemas
+    entrypoint: /bin/sh
+    command: >
+      -c "python manage.py graphql_schema --schema ttxbackend.schema.schema --out=schema.json &&
+          cp schemasLocal/* schemas/ &&
+          cp schema.json schemas/schema.json"
+  codegen:
+    depends_on:
+      backend-gen:
+        condition: service_completed_successfully
+    build:
+      context: ../../codegen
+      dockerfile: Dockerfile
+    volumes:
+      - type: volume
+        source: schemas
+        target: /usr/src/app/schemas
+        read_only: true
+      - type: bind
+        source: ../../codegen/gql
+        target: /usr/src/gql
+        read_only: true
+      - type: bind
+        source: ../../graphql/
+        target: /usr/src/app/generated
+    
+volumes:
+  schemas:
\ No newline at end of file

graphql/.env

-VITE_HTTP_HOST=127.0.0.1:8000
-VITE_HTTP_WS=ws://127.0.0.1:8000/ttxbackend/v1/subscription
\ No newline at end of file

graphql/package.json

@@ -10,8 +10,6 @@
     "@floating-ui/react": "0.26.9",
     "@inject/shared": "workspace:shared",
     "ahooks": "3.7.10",
-    "graphql": "16.8.1",
-    "graphql-tag": "2.12.6",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-apollo-network-status": "5.2.1",
@@ -19,23 +17,9 @@
     "subscriptions-transport-ws": "0.11.0"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "5.0.2",
-    "@graphql-codegen/cli": "5.0.2",
-    "@graphql-codegen/import-types-preset": "3.0.0",
-    "@graphql-codegen/introspection": "4.0.3",
-    "@graphql-codegen/named-operations-object": "3.0.0",
-    "@graphql-codegen/near-operation-file-preset": "3.0.0",
-    "@graphql-codegen/typescript": "4.0.6",
-    "@graphql-codegen/typescript-apollo-client-helpers": "^3.0.0",
-    "@graphql-codegen/typescript-operations": "4.2.0",
-    "@graphql-codegen/typescript-react-apollo": "4.3.0",
-    "@graphql-codegen/typescript-resolvers": "^4.0.6",
     "@types/lodash": "4.17.0",
     "@types/react": "18.2.66",
     "@types/react-dom": "18.2.22",
     "dotenv": "16.4.5"
-  },
-  "scripts": {
-    "generate": "graphql-codegen --require dotenv/config --config codegen.ts"
   }
 }

package.json

@@ -18,7 +18,6 @@
     "prebuild": "yarn workspace @inject/frontend prebuild",
     "build": "yarn workspace @inject/frontend build",
     "lint": "yarn prettier-check && yarn eslint",
-    "generate": "yarn workspace @inject/graphql generate",
     "prestart": "yarn generate",
     "predev": "yarn generate",
     "eslint": "eslint \"graphql/**/*.ts\" \"graphql/**/*.tsx\" \"frontend/**/*.ts\" \"frontend/**/*.tsx\" \"shared/**/*.ts\" \"shared/**/*.tsx\"",