Migrate Apollo Client to v4

frontend/__tests__/unit/components/ProgramActions.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { useSession as mockUseSession } from 'next-auth/react'
 import { render } from 'wrappers/testUtil'
+import { ProgramStatusEnum } from 'types/__generated__/graphql'
 import ProgramActions from 'components/ProgramActions'
 
 const mockPush = jest.fn()
@@ -65,7 +66,7 @@ describe('ProgramActions', () => {
     const button = screen.getByTestId('program-actions-button')
     fireEvent.click(button)
     fireEvent.click(screen.getByRole('menuitem', { name: /publish program/i }))
-    expect(setStatus).toHaveBeenCalledWith('PUBLISHED')
+    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Published)
     expect(mockPush).not.toHaveBeenCalled()
   })
 
@@ -74,15 +75,15 @@ describe('ProgramActions', () => {
     const button = screen.getByTestId('program-actions-button')
     fireEvent.click(button)
     fireEvent.click(screen.getByRole('menuitem', { name: /move to draft/i }))
-    expect(setStatus).toHaveBeenCalledWith('DRAFT')
+    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Draft)
   })
 
   test('handles Mark as Completed action', () => {
     render(<ProgramActions status="PUBLISHED" setStatus={setStatus} />)
     const button = screen.getByTestId('program-actions-button')
     fireEvent.click(button)
     fireEvent.click(screen.getByRole('menuitem', { name: /mark as completed/i }))
-    expect(setStatus).toHaveBeenCalledWith('COMPLETED')
+    expect(setStatus).toHaveBeenCalledWith(ProgramStatusEnum.Completed)
   })
 
   test('dropdown closes on outside click', () => {

frontend/__tests__/unit/components/ProgramCard.test.tsx

@@ -2,8 +2,8 @@ import { faEye } from '@fortawesome/free-regular-svg-icons'
 import { faEdit } from '@fortawesome/free-solid-svg-icons'
 import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
+import { ProgramStatusEnum } from 'types/__generated__/graphql'
 import type { Program } from 'types/mentorship'
-import { ProgramStatusEnum } from 'types/mentorship'
 import ProgramCard from 'components/ProgramCard'
 
 jest.mock('@fortawesome/react-fontawesome', () => ({
@@ -33,7 +33,7 @@ describe('ProgramCard', () => {
     key: 'test-program',
     name: 'Test Program',
     description: 'This is a test program description',
-    status: ProgramStatusEnum.PUBLISHED,
+    status: ProgramStatusEnum.Published,
     startedAt: '2024-01-01T00:00:00Z',
     endedAt: '2024-12-31T23:59:59Z',
     userRole: 'admin',
@@ -295,7 +295,7 @@ describe('ProgramCard', () => {
         key: 'minimal',
         name: 'Minimal Program',
         description: '',
-        status: ProgramStatusEnum.DRAFT,
+        status: ProgramStatusEnum.Draft,
         startedAt: '',
         endedAt: '',
       }

frontend/__tests__/unit/components/SingleModuleCard.test.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React from 'react'
 import { render } from 'wrappers/testUtil'
+import { ExperienceLevelEnum, ProgramStatusEnum } from 'types/__generated__/graphql'
 import type { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
-import { ExperienceLevelEnum, ProgramStatusEnum } from 'types/mentorship'
 import SingleModuleCard from 'components/SingleModuleCard'
 
 // Mock dependencies
@@ -89,8 +89,8 @@ const mockModule: Module = {
   key: 'test-module',
   name: 'Test Module',
   description: 'This is a test module description',
-  status: ProgramStatusEnum.PUBLISHED,
-  experienceLevel: ExperienceLevelEnum.INTERMEDIATE,
+  status: ProgramStatusEnum.Published,
+  experienceLevel: ExperienceLevelEnum.Intermediate,
   mentors: [
     {
       name: 'user1',

frontend/__tests__/unit/data/mockProgramData.ts

@@ -1,12 +1,13 @@
-import { ProgramStatusEnum } from 'types/mentorship'
+import { ProgramStatusEnum } from 'types/__generated__/graphql'
+
 export const mockPrograms = [
   {
     key: 'program_1',
     name: 'Program 1',
     description: 'This is a summary of Program 1.',
     startedAt: '2025-01-01',
     endedAt: '2025-12-31',
-    status: 'published',
+    status: ProgramStatusEnum.Published,
     modules: ['Module A', 'Module B'],
   },
 ]
@@ -16,7 +17,7 @@ export const mockProgramDetailsData = {
     key: 'test-program',
     name: 'Test Program',
     description: 'Sample summary',
-    status: ProgramStatusEnum.DRAFT,
+    status: ProgramStatusEnum.Draft,
     startedAt: '2025-01-01',
     endedAt: '2025-12-31',
     menteesLimit: 20,

frontend/__tests__/unit/pages/About.test.tsx

@@ -1,16 +1,19 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
 import { fireEvent, screen, waitFor, within } from '@testing-library/react'
 import { mockAboutData } from '@unit/data/mockAboutData'
 import { useRouter } from 'next/navigation'
 import { act } from 'react'
 import { render } from 'wrappers/testUtil'
 import About from 'app/about/page'
-import { GET_PROJECT_METADATA, GET_TOP_CONTRIBUTORS } from 'server/queries/projectQueries'
-import { GET_LEADER_DATA } from 'server/queries/userQueries'
-
-jest.mock('@apollo/client', () => ({
-  ...jest.requireActual('@apollo/client'),
+import {
+  GetProjectMetadataDocument,
+  GetTopContributorsDocument,
+} from 'types/__generated__/projectQueries.generated'
+import { GetLeaderDataDocument } from 'types/__generated__/userQueries.generated'
+
+jest.mock('@apollo/client/react', () => ({
+  ...jest.requireActual('@apollo/client/react'),
   useQuery: jest.fn(),
 }))
 
@@ -113,18 +116,18 @@ const mockError = {
 describe('About Component', () => {
   let mockRouter: { push: jest.Mock }
   beforeEach(() => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       const key = options?.variables?.key
 
-      if (query === GET_PROJECT_METADATA) {
+      if (query === GetProjectMetadataDocument) {
         if (key === 'nest') {
           return mockProjectData
         }
-      } else if (query === GET_TOP_CONTRIBUTORS) {
+      } else if (query === GetTopContributorsDocument) {
         if (key === 'nest') {
           return mockTopContributorsData
         }
-      } else if (query === GET_LEADER_DATA) {
+      } else if (query === GetLeaderDataDocument) {
         return mockUserData(key)
       }
 
@@ -172,7 +175,7 @@ describe('About Component', () => {
   })
 
   test('handles leader data loading error gracefully', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -305,7 +308,7 @@ describe('About Component', () => {
   })
 
   test('LeaderData component shows loading state correctly', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -336,7 +339,7 @@ describe('About Component', () => {
   })
 
   test('LeaderData component handles null user data correctly', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -367,7 +370,7 @@ describe('About Component', () => {
   })
 
   test('handles null project in data response gracefully', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return { data: { project: null }, loading: false, error: null }
       } else if (['arkid15r', 'kasya', 'mamicidal'].includes(options?.variables?.key)) {
@@ -389,7 +392,7 @@ describe('About Component', () => {
   })
 
   test('handles undefined user data in leader response', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -439,7 +442,7 @@ describe('About Component', () => {
       error: null,
     }
 
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -462,7 +465,7 @@ describe('About Component', () => {
   })
 
   test('shows fallback when user data is missing', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return mockProjectData
       } else if (options?.variables?.key === 'arkid15r') {
@@ -485,7 +488,7 @@ describe('About Component', () => {
   })
 
   test('renders LoadingSpinner when project data is loading', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return { loading: true, data: null, error: null }
       }
@@ -507,7 +510,7 @@ describe('About Component', () => {
   })
 
   test('renders ErrorDisplay when project is null', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
       if (options?.variables?.key === 'nest') {
         return { loading: false, data: { project: null }, error: null }
       }
@@ -529,8 +532,8 @@ describe('About Component', () => {
   })
 
   test('triggers toaster error when GraphQL request fails for project', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
-      if (query === GET_PROJECT_METADATA && options?.variables?.key === 'nest') {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
+      if (query === GetProjectMetadataDocument && options?.variables?.key === 'nest') {
         return { loading: false, data: null, error: new Error('GraphQL error') }
       }
       return {
@@ -555,8 +558,8 @@ describe('About Component', () => {
   })
 
   test('triggers toaster error when GraphQL request fails for topContributors', async () => {
-    ;(useQuery as jest.Mock).mockImplementation((query, options) => {
-      if (query === GET_TOP_CONTRIBUTORS && options?.variables?.key === 'nest') {
+    ;(useQuery as unknown as jest.Mock).mockImplementation((query, options) => {
+      if (query === GetTopContributorsDocument && options?.variables?.key === 'nest') {
         return { loading: false, data: null, error: new Error('GraphQL error') }
       }
       return {

frontend/__tests__/unit/pages/ApiKeysPage.test.tsx

@@ -1,15 +1,18 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { useQuery, useMutation } from '@apollo/client'
+import { useQuery, useMutation } from '@apollo/client/react'
 import { screen, waitFor, fireEvent, within } from '@testing-library/react'
 import { mockApiKeys, mockCreateApiKeyResult } from '@unit/data/mockApiKeysData'
 import { format, addDays } from 'date-fns'
 import React from 'react'
 import { render } from 'wrappers/testUtil'
 import ApiKeysPage from 'app/settings/api-keys/page'
-import { CREATE_API_KEY, REVOKE_API_KEY } from 'server/queries/apiKeyQueries'
+import {
+  CreateApiKeyDocument,
+  RevokeApiKeyDocument,
+} from 'types/__generated__/apiKeyQueries.generated'
 
-jest.mock('@apollo/client', () => ({
-  ...jest.requireActual('@apollo/client'),
+jest.mock('@apollo/client/react', () => ({
+  ...jest.requireActual('@apollo/client/react'),
   useQuery: jest.fn(),
   useMutation: jest.fn(),
 }))
@@ -48,8 +51,8 @@ jest.mock('next/navigation', () => ({
 }))
 
 describe('ApiKeysPage Component', () => {
-  const mockUseQuery = useQuery as jest.Mock
-  const mockUseMutation = useMutation as jest.Mock
+  const mockUseQuery = useQuery as unknown as jest.Mock
+  const mockUseMutation = useMutation as unknown as jest.Mock
   const mockRefetch = jest.fn()
   const mockCreateMutation = jest.fn().mockResolvedValue(mockCreateApiKeyResult)
   const mockRevokeMutation = jest
@@ -65,10 +68,10 @@ describe('ApiKeysPage Component', () => {
     })
 
     mockUseMutation.mockImplementation((mutation) => {
-      if (mutation === CREATE_API_KEY) {
+      if (mutation === CreateApiKeyDocument) {
         return [mockCreateMutation, { loading: false }]
       }
-      if (mutation === REVOKE_API_KEY) {
+      if (mutation === RevokeApiKeyDocument) {
         return [mockRevokeMutation, { loading: false }]
       }
       return [jest.fn(), { loading: false }]
@@ -169,7 +172,7 @@ describe('ApiKeysPage Component', () => {
       expect(mockCreateMutation).toHaveBeenCalledWith({
         variables: expect.objectContaining({
           name: expectedVariables.name,
-          expiresAt: expect.any(Date),
+          expiresAt: expect.any(String),
         }),
       })
     })
@@ -196,7 +199,7 @@ describe('ApiKeysPage Component', () => {
       expect(mockCreateMutation).toHaveBeenCalledWith({
         variables: {
           name: 'Test Key with Expiry',
-          expiresAt: new Date('2025-12-31'),
+          expiresAt: new Date('2025-12-31T00:00:00.000Z').toISOString(),
         },
       })
     })

frontend/__tests__/unit/pages/ChapterDetails.test.tsx

@@ -1,11 +1,11 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import { screen, waitFor } from '@testing-library/react'
 import { mockChapterDetailsData } from '@unit/data/mockChapterDetailsData'
 import { render } from 'wrappers/testUtil'
 import ChapterDetailsPage from 'app/chapters/[chapterKey]/page'
 
-jest.mock('@apollo/client', () => ({
-  ...jest.requireActual('@apollo/client'),
+jest.mock('@apollo/client/react', () => ({
+  ...jest.requireActual('@apollo/client/react'),
   useQuery: jest.fn(),
 }))
 
@@ -32,7 +32,7 @@ jest.mock('next/navigation', () => ({
 
 describe('chapterDetailsPage Component', () => {
   beforeEach(() => {
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: mockChapterDetailsData,
       error: null,
     })
@@ -43,7 +43,7 @@ describe('chapterDetailsPage Component', () => {
   })
 
   test('renders loading spinner initially', async () => {
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: null,
       error: null,
     })
@@ -55,7 +55,7 @@ describe('chapterDetailsPage Component', () => {
   })
 
   test('renders chapter data correctly', async () => {
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: mockChapterDetailsData,
       error: null,
     })
@@ -69,7 +69,7 @@ describe('chapterDetailsPage Component', () => {
   })
 
   test('displays "No chapters found" when there are no chapters', async () => {
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: { chapter: null },
       error: true,
     })
@@ -109,7 +109,7 @@ describe('chapterDetailsPage Component', () => {
         },
       ],
     }
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: chapterDataWithIncompleteContributors,
       error: null,
     })
@@ -120,7 +120,7 @@ describe('chapterDetailsPage Component', () => {
     })
   })
   test('renders chapter sponsor block correctly', async () => {
-    ;(useQuery as jest.Mock).mockReturnValue({
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: mockChapterDetailsData,
       error: null,
     })