Migrate Apollo Client to v4

frontend/graphql-codegen.ts

@@ -31,8 +31,7 @@ export default (async (): Promise<CodegenConfig> => {
             // Allow nullable input fields to remain unspecified
             inputValue: false,
           },
-          // Use `unknown` instead of `any` for unconfigured scalars
-          defaultScalarType: 'unknown',
+          defaultScalarType: 'any',
           // Apollo Client always includes `__typename` fields
           nonOptionalTypename: true,
           // Apollo Client doesn't add the `__typename` field to root types so
@@ -51,6 +50,14 @@ export default (async (): Promise<CodegenConfig> => {
         },
       },
       './src/types/__generated__/graphql.ts': {
+        config: {
+          scalars: {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            Date: 'string | number',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            DateTime: 'string | number',
+          },
+        },
         plugins: ['typescript'],
       },
     },

frontend/package.json

@@ -18,7 +18,7 @@
     "test:unit": "tsc --noEmit && NODE_OPTIONS='--experimental-vm-modules --no-warnings=DEP0040' jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.14.0",
+    "@apollo/client": "^4.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
     "@fortawesome/free-brands-svg-icons": "^7.0.1",
     "@fortawesome/free-regular-svg-icons": "^7.0.1",
@@ -62,6 +62,7 @@
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.1",
+    "rxjs": "^7.8.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

frontend/src/app/about/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import {
   faCircleCheck,
   faClock,
@@ -19,11 +19,14 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
-import { GET_PROJECT_METADATA, GET_TOP_CONTRIBUTORS } from 'server/queries/projectQueries'
-import { GET_LEADER_DATA } from 'server/queries/userQueries'
-import type { Contributor } from 'types/contributor'
-import type { Project } from 'types/project'
-import type { User } from 'types/user'
+import {
+  GetProjectMetadataDocument,
+  GetTopContributorsDocument,
+} from 'types/__generated__/projectQueries.generated'
+import { GetLeaderDataDocument } from 'types/__generated__/userQueries.generated'
+import { Contributor } from 'types/contributor'
+import { Project } from 'types/project'
+import { User } from 'types/user'
 import { aboutText, technologies } from 'utils/aboutData'
 import AnchorTitle from 'components/AnchorTitle'
 import AnimatedCounter from 'components/AnimatedCounter'
@@ -42,14 +45,14 @@ const projectKey = 'nest'
 
 const About = () => {
   const { data: projectMetadataResponse, error: projectMetadataRequestError } = useQuery(
-    GET_PROJECT_METADATA,
+    GetProjectMetadataDocument,
     {
       variables: { key: projectKey },
     }
   )
 
   const { data: topContributorsResponse, error: topContributorsRequestError } = useQuery(
-    GET_TOP_CONTRIBUTORS,
+    GetTopContributorsDocument,
     {
       variables: {
         excludedUsernames: Object.keys(leaders),
@@ -247,7 +250,7 @@ const About = () => {
 }
 
 const LeaderData = ({ username }: { username: string }) => {
-  const { data, loading, error } = useQuery(GET_LEADER_DATA, {
+  const { data, loading, error } = useQuery(GetLeaderDataDocument, {
     variables: { key: username },
   })
   const router = useRouter()

frontend/src/app/chapters/[chapterKey]/page.tsx

@@ -1,23 +1,23 @@
 'use client'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
-import { GET_CHAPTER_DATA } from 'server/queries/chapterQueries'
-import type { Chapter } from 'types/chapter'
+import { GetChapterDataDocument } from 'types/__generated__/chapterQueries.generated'
+import { Chapter } from 'types/chapter'
 import type { Contributor } from 'types/contributor'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 
 export default function ChapterDetailsPage() {
-  const { chapterKey } = useParams()
+  const { chapterKey } = useParams<{ chapterKey: string }>()
   const [chapter, setChapter] = useState<Chapter>({} as Chapter)
   const [topContributors, setTopContributors] = useState<Contributor[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
-  const { data, error: graphQLRequestError } = useQuery(GET_CHAPTER_DATA, {
+  const { data, error: graphQLRequestError } = useQuery(GetChapterDataDocument, {
     variables: { key: chapterKey },
   })
 

frontend/src/app/committees/[committeeKey]/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import {
   faCode,
   faCodeFork,
@@ -11,8 +11,8 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
-import { GET_COMMITTEE_DATA } from 'server/queries/committeeQueries'
-import type { Committee } from 'types/committee'
+import { GetCommitteeDataDocument } from 'types/__generated__/committeeQueries.generated'
+import { Committee } from 'types/committee'
 import type { Contributor } from 'types/contributor'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
@@ -24,7 +24,7 @@ export default function CommitteeDetailsPage() {
   const [topContributors, setTopContributors] = useState<Contributor[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
-  const { data, error: graphQLRequestError } = useQuery(GET_COMMITTEE_DATA, {
+  const { data, error: graphQLRequestError } = useQuery(GetCommitteeDataDocument, {
     variables: { key: committeeKey },
   })
 

frontend/src/app/members/[memberKey]/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import {
   faCodeMerge,
   faFolderOpen,
@@ -12,21 +12,21 @@ import { useParams } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import React, { useState, useEffect, useRef } from 'react'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
-import { GET_USER_DATA } from 'server/queries/userQueries'
+import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
 import type { Issue } from 'types/issue'
 import type { Milestone } from 'types/milestone'
 import type { RepositoryCardProps } from 'types/project'
 import type { PullRequest } from 'types/pullRequest'
 import type { Release } from 'types/release'
-import type { UserDetails } from 'types/user'
+import type { User } from 'types/user'
 import { formatDate } from 'utils/dateFormatter'
 import { drawContributions, fetchHeatmapData, HeatmapData } from 'utils/helpers/githubHeatmap'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 
 const UserDetailsPage: React.FC = () => {
-  const { memberKey } = useParams()
-  const [user, setUser] = useState<UserDetails | null>()
+  const { memberKey } = useParams<{ memberKey: string }>()
+  const [user, setUser] = useState<User | null>()
   const [issues, setIssues] = useState<Issue[]>([])
   const [topRepositories, setTopRepositories] = useState<RepositoryCardProps[]>([])
   const [milestones, setMilestones] = useState<Milestone[]>([])
@@ -37,7 +37,7 @@ const UserDetailsPage: React.FC = () => {
   const [username, setUsername] = useState('')
   const [isPrivateContributor, setIsPrivateContributor] = useState(false)
 
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_USER_DATA, {
+  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetUserDataDocument, {
     variables: { key: memberKey },
   })
 

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx

@@ -1,24 +1,23 @@
 'use client'
-
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import upperFirst from 'lodash/upperFirst'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
-import { GET_PROGRAM_ADMINS_AND_MODULES } from 'server/queries/moduleQueries'
-import type { Module } from 'types/mentorship'
+import { GetProgramAdminsAndModulesDocument } from 'types/__generated__/moduleQueries.generated'
+import { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 import { getSimpleDuration } from 'components/ModuleCard'
 
 const ModuleDetailsPage = () => {
-  const { programKey, moduleKey } = useParams()
+  const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
   const [module, setModule] = useState<Module | null>(null)
   const [admins, setAdmins] = useState(null)
   const [isLoading, setIsLoading] = useState(true)
 
-  const { data, error } = useQuery(GET_PROGRAM_ADMINS_AND_MODULES, {
+  const { data, error } = useQuery(GetProgramAdminsAndModulesDocument, {
     variables: {
       programKey,
       moduleKey,
@@ -50,11 +49,11 @@ const ModuleDetailsPage = () => {
 
   const moduleDetails = [
     { label: 'Experience Level', value: upperFirst(module.experienceLevel) },
-    { label: 'Start Date', value: formatDate(module.startedAt) },
-    { label: 'End Date', value: formatDate(module.endedAt) },
+    { label: 'Start Date', value: formatDate(module.startedAt as string) },
+    { label: 'End Date', value: formatDate(module.endedAt as string) },
     {
       label: 'Duration',
-      value: getSimpleDuration(module.startedAt, module.endedAt),
+      value: getSimpleDuration(module.startedAt as string, module.endedAt as string),
     },
   ]
 

frontend/src/app/mentorship/programs/[programKey]/page.tsx

@@ -1,12 +1,11 @@
 'use client'
-
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import upperFirst from 'lodash/upperFirst'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay } from 'app/global-error'
-import { GET_PROGRAM_AND_MODULES } from 'server/queries/programsQueries'
-import type { Module, Program } from 'types/mentorship'
+import { GetProgramAndModulesDocument } from 'types/__generated__/programsQueries.generated'
+import { Program, Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
@@ -20,7 +19,7 @@ const ProgramDetailsPage = () => {
     data,
     refetch,
     loading: isQueryLoading,
-  } = useQuery(GET_PROGRAM_AND_MODULES, {
+  } = useQuery(GetProgramAndModulesDocument, {
     variables: { programKey },
     skip: !programKey,
     notifyOnNetworkStatusChange: true,
@@ -71,8 +70,8 @@ const ProgramDetailsPage = () => {
 
   const programDetails = [
     { label: 'Status', value: upperFirst(program.status) },
-    { label: 'Start Date', value: formatDate(program.startedAt) },
-    { label: 'End Date', value: formatDate(program.endedAt) },
+    { label: 'Start Date', value: formatDate(program.startedAt as string) },
+    { label: 'End Date', value: formatDate(program.endedAt as string) },
     { label: 'Mentees Limit', value: String(program.menteesLimit) },
     {
       label: 'Experience Levels',

frontend/src/app/mentorship/programs/page.tsx

@@ -2,6 +2,7 @@
 
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
+import { ProgramStatusEnum } from 'types/__generated__/graphql'
 import { Program } from 'types/mentorship'
 import ProgramCard from 'components/ProgramCard'
 import SearchPageLayout from 'components/SearchPageLayout'
@@ -51,7 +52,8 @@ const ProgramsPage = () => {
       totalPages={totalPages}
     >
       <div className="mt-16 grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-        {programs && programs.filter((p) => p.status === 'published').map(renderProgramCard)}
+        {programs &&
+          programs.filter((p) => p.status === ProgramStatusEnum.Published).map(renderProgramCard)}
       </div>
     </SearchPageLayout>
   )

frontend/src/app/my/mentorship/page.tsx

@@ -1,6 +1,5 @@
 'use client'
-
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client/react'
 import { faPlus, faGraduationCap } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { addToast } from '@heroui/toast'
@@ -9,10 +8,10 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { GET_MY_PROGRAMS } from 'server/queries/programsQueries'
+import { GetMyProgramsDocument } from 'types/__generated__/programsQueries.generated'
 import type { ExtendedSession } from 'types/auth'
-import type { Program } from 'types/mentorship'
 
+import { Program } from 'types/mentorship'
 import ActionButton from 'components/ActionButton'
 import LoadingSpinner from 'components/LoadingSpinner'
 import ProgramCard from 'components/ProgramCard'
@@ -54,7 +53,7 @@ const MyMentorshipPage: React.FC = () => {
     data: programData,
     loading: loadingPrograms,
     error,
-  } = useQuery(GET_MY_PROGRAMS, {
+  } = useQuery(GetMyProgramsDocument, {
     variables: { search: debouncedQuery, page, limit: 24 },
     fetchPolicy: 'cache-and-network',
     errorPolicy: 'all',

frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx

@@ -1,13 +1,13 @@
 'use client'
-import { useQuery, useMutation } from '@apollo/client'
+import { useMutation, useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
 import { useRouter, useParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import type React from 'react'
 import { useState, useEffect } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { UPDATE_PROGRAM } from 'server/mutations/programsMutations'
-import { GET_PROGRAM_DETAILS } from 'server/queries/programsQueries'
+import { GetProgramDetailsDocument } from 'types/__generated__/programsQueries.generated'
 import type { ExtendedSession } from 'types/auth'
 import { formatDateForInput } from 'utils/dateFormatter'
 import { parseCommaSeparated } from 'utils/parser'
@@ -23,7 +23,7 @@ const EditProgramPage = () => {
     data,
     error,
     loading: queryLoading,
-  } = useQuery(GET_PROGRAM_DETAILS, {
+  } = useQuery(GetProgramDetailsDocument, {
     variables: { programKey },
     skip: !programKey,
     fetchPolicy: 'network-only',
@@ -74,8 +74,8 @@ const EditProgramPage = () => {
         name: program.name || '',
         description: program.description || '',
         menteesLimit: program.menteesLimit ?? 5,
-        startedAt: formatDateForInput(program.startedAt),
-        endedAt: formatDateForInput(program.endedAt),
+        startedAt: formatDateForInput(program.startedAt as string),
+        endedAt: formatDateForInput(program.endedAt as string),
         tags: (program.tags || []).join(', '),
         domains: (program.domains || []).join(', '),
         adminLogins: (program.admins || [])

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx

@@ -1,13 +1,12 @@
 'use client'
-
-import { useMutation, useQuery } from '@apollo/client'
+import { useMutation, useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
 import { useParams, useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React, { useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { UPDATE_MODULE } from 'server/mutations/moduleMutations'
-import { GET_PROGRAM_ADMINS_AND_MODULES } from 'server/queries/moduleQueries'
+import { GetProgramAdminsAndModulesDocument } from 'types/__generated__/moduleQueries.generated'
 import type { ExtendedSession } from 'types/auth'
 import { EXPERIENCE_LEVELS, type ModuleFormData } from 'types/mentorship'
 import { formatDateForInput } from 'utils/dateFormatter'
@@ -23,13 +22,13 @@ const EditModulePage = () => {
   const [formData, setFormData] = useState<ModuleFormData | null>(null)
   const [accessStatus, setAccessStatus] = useState<'checking' | 'allowed' | 'denied'>('checking')
 
-  const [updateModule, { loading: mutationLoading }] = useMutation(UPDATE_MODULE)
+  const [updateModule, { loading: mutationLoading }] = useMutation(UPDATE_MODULE) // TODO: update
 
   const {
     data,
     loading: queryLoading,
     error: queryError,
-  } = useQuery(GET_PROGRAM_ADMINS_AND_MODULES, {
+  } = useQuery(GetProgramAdminsAndModulesDocument, {
     variables: { programKey, moduleKey },
     skip: !programKey || !moduleKey,
     fetchPolicy: 'network-only',