Typed GraphQL Service Layer

datajunction-server/Makefile

@@ -31,10 +31,21 @@ spellcheck:
 
 check:
 	pdm run pre-commit run --all-files
+	$(MAKE) generate-schemas
 
 lint:
 	make check
 
+generate-schemas:
+	pdm run python scripts/generate-openapi.py -o ../openapi.json
+	pdm run python scripts/generate-graphql.py -o datajunction_server/api/graphql/
+
+check-schemas:
+	$(MAKE) generate-schemas
+	@echo "Checking for uncommitted schema changes..."
+	git diff --exit-code ../openapi.json datajunction_server/api/graphql/schema.graphql || \
+		(echo "ERROR: Schema files are out of date. Run 'make generate-schemas' and commit the changes." && exit 1)
+
 dev-release:
 	hatch version dev
 	hatch build

datajunction-ui/codegen.yml

@@ -0,0 +1,24 @@
+overwrite: true
+# Use static schema file from server (no live server needed)
+schema: ../datajunction-server/datajunction_server/api/graphql/schema.graphql
+documents: src/graphql/**/*.graphql
+generates:
+  src/types/graphql.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+    config:
+      # Use interface instead of type for better extensibility
+      declarationKind: interface
+      # Make optional fields nullable
+      maybeValue: T | null
+      # Skip __typename by default
+      skipTypename: true
+      # Use enums as TypeScript enums
+      enumsAsTypes: false
+      # Avoid 'Maybe' wrapper, use 'T | null' directly
+      inputMaybeValue: T | null
+      # Flatten pick helpers for cleaner types
+      flattenGeneratedTypes: true
+      # Export fragment types
+      exportFragmentSpreadSubTypes: true

datajunction-ui/package.json

@@ -124,7 +124,12 @@
     "cleanAndSetup": "ts-node ./internals/scripts/clean.ts",
     "prettify": "prettier --write",
     "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js",
-    "prepublishOnly": "webpack --mode=production"
+    "prepublishOnly": "webpack --mode=production",
+    "codegen": "yarn codegen:graphql && yarn codegen:openapi",
+    "codegen:graphql": "graphql-codegen --config codegen.yml",
+    "codegen:graphql:watch": "graphql-codegen --config codegen.yml --watch",
+    "codegen:openapi": "openapi-typescript ../openapi.json -o src/types/openapi.ts",
+    "codegen:check": "yarn codegen && git diff --exit-code src/types/graphql.ts src/types/openapi.ts"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -192,17 +197,22 @@
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@graphql-codegen/cli": "6.1.1",
+    "@graphql-codegen/typescript": "5.0.7",
+    "@graphql-codegen/typescript-operations": "5.0.7",
     "@testing-library/user-event": "14.4.3",
     "@types/glob": "^8.1.0",
     "@types/minimatch": "^5.1.2",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react-hooks": "4.6.0",
+    "graphql": "16.12.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
     "jest-fetch-mock": "3.0.3",
     "jest-watch-typeahead": "2.2.2",
     "mini-css-extract-plugin": "2.7.6",
+    "openapi-typescript": "7.10.1",
     "resize-observer-polyfill": "1.5.1"
   }
 }

datajunction-ui/src/app/components/NotificationBell.tsx

@@ -29,7 +29,7 @@ interface NodeInfo {
   name: string;
   type: string;
   current?: {
-    displayName?: string;
+    displayName?: string | null;
   };
 }
 
@@ -54,7 +54,7 @@ const enrichWithNodeInfo = (
     return {
       ...entry,
       node_type: node?.type,
-      display_name: node?.current?.displayName,
+      display_name: node?.current?.displayName ?? undefined,
     };
   });
 };