Merge pull request #778 from bcgov/anton/apollo-client

CATS: apollo client setup, update Participants tab to use it

Author: anton-bcgov

cats-frontend/.prettierignore

@@ -1 +1,4 @@
-**/generated.ts
+**/generated.ts
+**/*.generated.ts
+**/*.generated.tsx
+**/generated/types.ts

cats-frontend/apollo.config.js cats-frontend/apollo.config.cjscats-frontend/apollo.config.js renamed to cats-frontend/apollo.config.cjs

@@ -1,10 +1,10 @@
 module.exports = {
   client: {
     service: {
-      name: 'nr-site-registry',
+      name: 'CATS',
       localSchemaFile: `./graphql.schema.json`,
     },
     includes: [`./src/**/*`],
-    excludes: ['./src/graphql/generated.ts'],
+    excludes: ['./src/**/*.generated.ts'],
   },
 };

cats-frontend/codegen.ts

@@ -1,16 +1,27 @@
 import { CodegenConfig } from '@graphql-codegen/cli';
 
+import { loadEnv } from 'vite';
+import { resolve } from 'path';
+
+const mode = process.env.NODE_ENV || 'development';
+const env = loadEnv(mode, resolve(__dirname, './'), '');
+
 const config: CodegenConfig = {
   overwrite: true,
-  schema: 'http://host.docker.internal:4007/graphql',
+  schema: `${env.VITE_BACKEND_API || 'http://localhost:4005'}/graphql`,
   documents: ['src/**/*.graphql'],
   generates: {
-    './src/graphql/generated.ts': {
-      plugins: [
-        'typescript',
-        'typescript-operations',
-        'typescript-react-apollo',
-      ],
+    'src/generated/types.ts': {
+      plugins: ['typescript'],
+    },
+    'src/': {
+      preset: 'near-operation-file',
+      presetConfig: {
+        extension: '.generated.tsx',
+        baseTypesPath: 'generated/types.ts',
+      },
+      plugins: ['typescript-operations', 'typescript-react-apollo'],
+      config: { withHooks: true },
     },
     'graphql.schema.json': {
       plugins: ['introspection'],

cats-frontend/package-lock.json

@@ -11,7 +11,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.0",
+    "@apollo/client": "^3.13.1",
     "@bcgov/bc-sans": "^2.1.0",
     "@bcgov/design-tokens": "3.2.0",
     "@emotion/react": "^11.10.4",
@@ -48,8 +48,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "vite",
-    "dev": "vite",
+    "start": "npm run dev",
+    "dev": "concurrently \"vite\" \"graphql-codegen --watch\"",
     "build": "vite build",
     "serve": "vite preview",
     "test": "vitest",
@@ -81,6 +81,7 @@
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/client-preset": "^4.4.0",
     "@graphql-codegen/introspection": "^4.0.3",
+    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
     "@parcel/watcher": "^2.4.1",
     "@svgr/core": "^8.1.0",