upgrade manually graphql apollo client version 3 to 4

Author: xcodeassociated

.gitignore

@@ -27,7 +27,7 @@ coverage
 # AI
 CLAUDE.md
 
-src/graphql/*.ts
-src/graphql/*.js
+src/graphql/generated/*.ts
+src/graphql/generated/*.js
 
 .env.*

bun.lockb

@@ -2,13 +2,13 @@ import type { CodegenConfig } from '@graphql-codegen/cli'
 
 const config: CodegenConfig = {
   schema: './src/graphql/schema.graphql',
-  documents: './src/**/*.graphql',
+  documents: ['./src/**/*.{ts,tsx,graphql}'],
+  ignoreNoDocuments: true,
   generates: {
-    './src/graphql/generated.ts': {
-      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
-      config: {
-        withHooks: true,
-        withResultType: true,
+    './src/graphql/generated/': {
+      preset: 'client',
+      presetConfig: {
+        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
       },
     },
   },

codegen.ts

@@ -12,10 +12,10 @@
     "test": "vitest --run",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
-    "generate:graphql": "graphql-codegen --config codegen.ts"
+    "generate:graphql": "graphql-codegen --config codegen.ts --verbose"
   },
   "dependencies": {
-    "@apollo/client": "^3.14.0",
+    "@apollo/client": "^4.1.6",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -30,7 +30,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "graphql": "^16.10.0",
+    "graphql": "^16.13.0",
     "graphql-codegen": "^0.4.0",
     "i18next": "^25.8.7",
     "i18next-browser-languagedetector": "^8.2.1",
@@ -51,10 +51,10 @@
     "node": ">=22.12.0"
   },
   "devDependencies": {
-    "@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",
+    "@graphql-codegen/cli": "^6.1.2",
+    "@graphql-codegen/client-preset": "^5.2.3",
+    "@graphql-codegen/typescript-operations": "^5.0.8",
+    "@graphql-codegen/typescript-react-apollo": "^4.4.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",

package.json

@@ -3,19 +3,19 @@ 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, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client'
-import { setContext } from '@apollo/client/link/context'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { SetContextLink } from '@apollo/client/link/context'
+import { ApolloProvider } from '@apollo/client/react'
 import { ReactKeycloakProvider } from '@react-keycloak/web'
+import keycloak from '@/lib/keycloak'
 import { AuthClientError, AuthClientEvent } from '@react-keycloak/core/lib/types'
 import { AuthClientTokens } from '@react-keycloak/core'
 import { BrowserRouter } from 'react-router-dom'
-import keycloak from '@/lib/keycloak'
+import { ThemeProvider } from '@/components/theme-provider'
 import App from './App'
 import '@/locales/i18n'
 import './App.css'
 
-import { ThemeProvider } from '@/components/theme-provider'
-
 const onKeycloakEvent = (_event: AuthClientEvent, error?: AuthClientError): void => {
   if (error) {
     console.error('Keycloak error: ' + JSON.stringify(error))
@@ -28,15 +28,16 @@ const onKeycloakTokens = (_tokens: AuthClientTokens): void => {
   // console.info("Keycloak token: " + JSON.stringify(tokens))
 }
 
-const httpLink = createHttpLink({
+const httpLink = new HttpLink({
   uri: import.meta.env.VITE_APP_BACKEND_URL + '/graphql',
 })
 
-const authLink = setContext((_, { headers }) => {
+const authLink = new SetContextLink((prevContext) => {
   const token = keycloak.token
+
   return {
     headers: {
-      ...headers,
+      ...prevContext.headers,
       authorization: token ? `Bearer ${token}` : '',
     },
   }

src/main.tsx

@@ -2,15 +2,15 @@ import { beforeAll, afterAll, afterEach, describe, expect, it, vitest } from 'vi
 import { render, screen, waitFor } from '@testing-library/react'
 import React, { act } from 'react'
 import { BrowserRouter } from 'react-router-dom'
-import { GetAllPermissionsDocument } from '@/graphql/generated'
+import { GetAllPermissionsDocument } from '@/graphql/generated/graphql'
 import { store } from '@/store/store'
 import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { usersApi } from './api/usersApi'
 import { Provider } from 'react-redux'
 import '@/locales/i18n'
 import { ThemeProvider } from '@/components/theme-provider'
-import { MockedProvider } from '@apollo/client/testing'
+import { MockedProvider } from '@apollo/client/testing/react'
 
 const mockedRolesGql = {
   request: {

src/pages/users/Users.test.tsx

@@ -1,10 +1,21 @@
 import { useEffect, useState } from 'react'
 import { Role } from '../api/usersApi.types'
-import { useGetAllPermissionsQuery } from '@/graphql/generated'
+import { graphql } from '@/graphql/generated/'
+import { useQuery } from '@apollo/client/react'
 
 export const useRolesGraphql = () => {
   const [roles, setRoles] = useState<Role[]>()
-  const { loading, error, data } = useGetAllPermissionsQuery({
+
+  const GetAllPermissionsDocument = graphql(`
+    query GetAllPermissions($page: Int, $size: Int, $sort: String, $direction: String) {
+      getAllPermissions(page: $page, size: $size, sort: $sort, direction: $direction) {
+        id
+        name
+      }
+    }
+  `)
+
+  const { loading, error, data } = useQuery(GetAllPermissionsDocument, {
     variables: {
       page: 0,
       size: 10,