fix agentic issues and apollo client

Author: xcodeassociated

bun.lockb

@@ -15,7 +15,7 @@
     "generate:graphql": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": "^4.1.3",
+    "@apollo/client": "^3.14.0",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -26,69 +26,68 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@react-keycloak/web": "^3.4.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "graphql": "^16.12.0",
+    "cmdk": "^1.1.1",
+    "graphql": "^16.10.0",
     "graphql-codegen": "^0.4.0",
-    "i18next": "^25.8.1",
-    "i18next-browser-languagedetector": "^8.0.2",
-    "keycloak-js": "^26.2.2",
-    "lucide-react": "^0.563.0",
+    "i18next": "^25.8.7",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "keycloak-js": "^26.2.3",
+    "lucide-react": "^0.564.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.1",
     "react-i18next": "^16.5.4",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.0",
     "redux-persist": "^6.0.0",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.3.6"
   },
   "engines": {
     "node": ">=22.12.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^6.1.1",
-    "@graphql-codegen/client-preset": "^5.2.2",
-    "@graphql-codegen/typescript-operations": "^5.0.7",
-    "@graphql-codegen/typescript-react-apollo": "^4.4.0",
+    "@graphql-codegen/cli": "^5.0.7",
+    "@graphql-codegen/client-preset": "^4.8.3",
+    "@graphql-codegen/typescript-operations": "^4.6.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.3",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/keycloak-js": "^3.4.1",
-    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.11",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.1.7",
     "@types/react-i18next": "^8.1.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-persist": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
-    "happy-dom": "^20.6.1",
-    "jsdom": "^28.0.0",
+    "jsdom": "^28.1.0",
     "msw": "^2.12.8",
     "postcss": "^8.4.49",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.5",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.18"
   }
 }

package.json

@@ -4,7 +4,7 @@ import Keycloak from 'keycloak-js'
 // Pass initialization options as required or leave blank to load from 'keycloak.json'
 const keycloak = new Keycloak({
   url: import.meta.env.VITE_APP_KEYCLOAK_URL,
-  realm: 'master',
+  realm: 'app',
   clientId: 'frontend',
 })
 

src/lib/keycloak.ts

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { persistor, store } from './store/store'
 import { PersistGate } from 'redux-persist/integration/react'
-import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
+import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
 import { ReactKeycloakProvider } from '@react-keycloak/web'
 import { AuthClientError, AuthClientEvent } from '@react-keycloak/core/lib/types'
@@ -15,7 +15,6 @@ import '@/locales/i18n'
 import './App.css'
 
 import { ThemeProvider } from '@/components/theme-provider'
-import { ApolloProvider } from '@apollo/client/react'
 
 const onKeycloakEvent = (_event: AuthClientEvent, error?: AuthClientError): void => {
   if (error) {

src/main.tsx

@@ -10,28 +10,7 @@ import { usersApi } from './api/usersApi'
 import { Provider } from 'react-redux'
 import '@/locales/i18n'
 import { ThemeProvider } from '@/components/theme-provider'
-
-// Mock the roles GraphQL hook to provide static role data
-vi.mock('./hooks/useRolesGraphql', () => ({
-  useRolesGraphql: () => ({
-    roles: [
-      {
-        _id: '63c16ce71ba30e5f08b4d66e',
-        name: 'GUEST',
-        description: 'Anonymous user who can only read info',
-        version: undefined,
-        createdBy: undefined,
-        createdDate: undefined,
-        modifiedBy: undefined,
-        modifiedDate: undefined,
-      },
-    ],
-    loading: false,
-    error: undefined,
-  }),
-}))
-
-import { MockedProvider } from '@apollo/client/testing/react'
+import { MockedProvider } from '@apollo/client/testing'
 
 const mockedRolesGql = {
   request: {

src/pages/users/Users.test.tsx

@@ -84,12 +84,12 @@ export const useUserColumns = () => {
                       updateUser(data).then(() => {})
                     }}
                   >
-                    <Label className="group m-0 inline-flex w-full rounded-md bg-background px-2 py-2 text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden">
+                    <Label className="group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground m-0 inline-flex w-full rounded-md px-2 py-2 text-sm font-normal transition-colors focus:outline-hidden">
                       {t(`users.update`, { ns: ['main'] })}
                     </Label>
                   </UserDialog>
                   <Label
-                    className="group m-0 inline-flex w-full rounded-md bg-background px-2 py-2 text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden"
+                    className="group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground m-0 inline-flex w-full rounded-md px-2 py-2 text-sm font-normal transition-colors focus:outline-hidden"
                     onClick={() => deleteUser(user._id!)}
                   >
                     {t(`users.delete`, { ns: ['main'] })}

src/pages/users/hooks/useColumns.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState, useCallback } from 'react'
-
+import { useEffect, useState } from 'react'
 import { Role } from '../api/usersApi.types'
 import { useGetAllPermissionsQuery } from '@/graphql/generated'
 
@@ -14,26 +13,25 @@ export const useRolesGraphql = () => {
     },
   })
 
-  const getRoles = useCallback(() => {
-    const permissions =
-      data?.getAllPermissions?.map(
-        (e: Role) =>
-          ({
-            _id: e?._id,
-            name: e?.name,
-          }) as Role
-      ) ?? []
-    setRoles(permissions)
-  }, [data])
+  const getRoles = () => {
+    const permissions: Role[] | undefined = data?.getAllPermissions?.map((e) => {
+      return {
+        _id: e?.id,
+        name: e?.name,
+      } as Role
+    })
+    setRoles([...permissions!])
+  }
 
   useEffect(() => {
     if (!roles && !loading && !error && data) {
       getRoles()
     }
+
     return () => {
       setRoles(undefined)
     }
-  }, [roles, loading, error, data, getRoles])
+  }, [data, loading, error])
 
   return {
     roles,

src/pages/users/hooks/useRolesGraphql.tsx

@@ -13,7 +13,7 @@ export default defineConfig({
   // @ts-expect-error
   test: {
     globals: true,
-    environment: 'happy-dom',
+    environment: 'jsdom',
     css: true,
     setupFiles: [path.resolve(__dirname, './src/setupTests.ts')],
   },