KK-1065 | fix: fix "yarn generate:graphql" by using graphql-codegen

.eslintignore

@@ -1,2 +1,3 @@
+src/domain/api/generatedTypes/graphql.tsx
+src/domain/headlessCms/graphql/__generated__.ts
 src/serviceWorker.ts
-src/domain/headlessCms/graphql/__generated__.ts

codegen.ts

@@ -0,0 +1,21 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: process.env.REACT_APP_API_URI,
+  documents: ['src/**/*.ts'],
+  generates: {
+    'src/domain/api/generatedTypes/graphql.tsx': {
+      plugins: ['typescript', 'typescript-operations'],
+      config: {
+        avoidOptionals: {
+          field: true,
+          object: true,
+        },
+        dedupeOperationSuffix: true,
+      },
+      hooks: { afterOneFileWrite: ['prettier --write'] },
+    },
+  },
+};
+
+export default config;

package.json

@@ -15,13 +15,13 @@
     "build": "tsc & vite build",
     "format:code": "eslint --ext js,ts,tsx src --fix",
     "format:scss": "prettier --config .prettierrc.json --write src/**/*.scss",
-    "generate:graphql": "apollo client:codegen --target=typescript --no-addTypename --outputFlat src/domain/api/generatedTypes --excludes=src/domain/headlessCms/**",
+    "generate:graphql": "cross-env DOTENV_CONFIG_PATH=./.env.development.local graphql-codegen -r dotenv/config --config ./codegen.ts",
     "lint": "eslint --ext js,ts,tsx src",
     "serve": "vite preview",
     "start": "vite",
-    "test": "TZ=Europe/Helsinki vitest run",
-    "test:coverage": "TZ=Europe/Helsinki vitest run --coverage",
-    "test:watch": "TZ=Europe/Helsinki vitest",
+    "test": "cross-env TZ=Europe/Helsinki vitest run",
+    "test:coverage": "cross-env TZ=Europe/Helsinki vitest run --coverage",
+    "test:watch": "cross-env TZ=Europe/Helsinki vitest",
     "test:browser": "testcafe \"chrome --window-size='1920,1080'\" browser-tests/ --live --dev --lang=fi-FI",
     "test:browser:ci": "testcafe \"chrome:headless --disable-gpu --window-size='1920,1080'\" --lang=fi-FI --screenshots path=report takeOnFails=true --video report browser-tests/",
     "test:browser:wsl2win": "testcafe 'path:`/mnt/c/Program Files/Google/Chrome/Application/chrome.exe`' browser-tests/ --live --dev --lang=fi-FI",
@@ -119,7 +119,7 @@
     "redux-persist": "^6.0.0",
     "sass": "^1.67.0",
     "testcafe": "^3.3.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "validator": "^13.11.0",
     "vite": "^4.4.9",
     "vite-plugin-eslint": "^1.8.1",
@@ -139,5 +139,11 @@
     "ignore": [
       "helsinki-utils"
     ]
+  },
+  "devDependencies": {
+    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^4.0.1"
   }
 }

src/common/commonUtils.tsx

@@ -9,3 +9,9 @@ export const getNodeText = (node: any): string => {
   if (typeof node === 'object' && node) return getNodeText(node.props.children);
   return node;
 };
+
+/**
+ * Extract object type from union type by __typename value.
+ * @example TypeByTypename<{__typename: 'A'} | {__typename: 'B'}, 'B'> == {__typename: 'B'}
+ */
+export type TypeByTypename<T, U extends string> = Extract<T, { __typename: U }>;

src/domain/__tests__/config.test.js → src/domain/__tests__/Config.test.tsx

@@ -1,31 +1,27 @@
 import Config from '../config';
 
 describe('Config', () => {
-  let env;
+  const origEnv: NodeJS.ProcessEnv = { ...process.env };
 
   beforeEach(() => {
-    env = import.meta.env;
+    process.env = { ...origEnv };
   });
 
   afterEach(() => {
-    import.meta.env = env;
+    process.env = { ...origEnv };
   });
 
   describe('featureFlagShowCoronaInfo', () => {
     it('should return true when VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO is true', () => {
-      import.meta.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = 'true';
-      expect(Config.featureFlagShowCoronaInfo).toEqual(true);
-
-      import.meta.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = true;
-
+      process.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = 'true';
       expect(Config.featureFlagShowCoronaInfo).toEqual(true);
     });
 
     it('should return false otherwise', () => {
-      import.meta.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = 'other string';
+      process.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = 'other string';
       expect(Config.featureFlagShowCoronaInfo).toEqual(false);
 
-      import.meta.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = undefined;
+      process.env.VITE_FEATURE_FLAG_SHOW_CORONAVIRUS_INFO = undefined;
       expect(Config.featureFlagShowCoronaInfo).toEqual(false);
     });
   });