Migrate Apollo Client to v4

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": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -63,6 +63,7 @@
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.2",
+    "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,16 @@ 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,
+  GetProjectMetadataQuery,
+  GetTopContributorsDocument,
+  GetTopContributorsQuery,
+} from 'types/__generated__/projectQueries.generated'
+import {
+  GetLeaderDataDocument,
+  GetLeaderDataQuery,
+} from 'types/__generated__/userQueries.generated'
 import { aboutText, technologies } from 'utils/aboutData'
 import AnchorTitle from 'components/AnchorTitle'
 import AnimatedCounter from 'components/AnimatedCounter'
@@ -42,14 +47,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),
@@ -60,8 +65,12 @@ const About = () => {
     }
   )
 
-  const [projectMetadata, setProjectMetadata] = useState<Project | null>(null)
-  const [topContributors, setTopContributors] = useState<Contributor[]>([])
+  const [projectMetadata, setProjectMetadata] = useState<GetProjectMetadataQuery['project'] | null>(
+    null
+  )
+  const [topContributors, setTopContributors] = useState<
+    GetTopContributorsQuery['topContributors']
+  >([])
 
   useEffect(() => {
     if (projectMetadataResponse?.project) {
@@ -247,7 +256,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()
@@ -261,7 +270,7 @@ const LeaderData = ({ username }: { username: string }) => {
     return <p>No data available for {username}</p>
   }
 
-  const handleButtonClick = (user: User) => {
+  const handleButtonClick = (user: GetLeaderDataQuery['user']) => {
     router.push(`/members/${user.login}`)
   }
 

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

@@ -1,23 +1,27 @@
 '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,
+  GetChapterDataQuery,
+} from 'types/__generated__/chapterQueries.generated'
 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 [chapter, setChapter] = useState<Chapter>({} as Chapter)
+  const { chapterKey } = useParams<{ chapterKey: string }>()
+  const [chapter, setChapter] = useState<GetChapterDataQuery['chapter']>(
+    {} as GetChapterDataQuery['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 },
   })
 
@@ -63,7 +67,7 @@ export default function ChapterDetailsPage() {
     <DetailsCard
       details={details}
       entityKey={chapter.key}
-      geolocationData={[chapter]}
+      geolocationData={[chapter]} // TODO: change the type of component
       isActive={chapter.isActive}
       socialLinks={chapter.relatedUrls}
       summary={chapter.summary}

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,20 +11,22 @@ 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,
+  GetCommitteeDataQuery,
+} from 'types/__generated__/committeeQueries.generated'
 import type { Contributor } from 'types/contributor'
 import { formatDate } from 'utils/dateFormatter'
 import DetailsCard from 'components/CardDetailsPage'
 import LoadingSpinner from 'components/LoadingSpinner'
 
 export default function CommitteeDetailsPage() {
   const { committeeKey } = useParams<{ committeeKey: string }>()
-  const [committee, setCommittee] = useState<Committee | null>(null)
+  const [committee, setCommittee] = useState<GetCommitteeDataQuery['committee'] | null>(null)
   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,26 +12,22 @@ 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 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 { GetUserDataDocument, GetUserDataQuery } from 'types/__generated__/userQueries.generated'
 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 [issues, setIssues] = useState<Issue[]>([])
-  const [topRepositories, setTopRepositories] = useState<RepositoryCardProps[]>([])
-  const [milestones, setMilestones] = useState<Milestone[]>([])
-  const [pullRequests, setPullRequests] = useState<PullRequest[]>([])
-  const [releases, setReleases] = useState<Release[]>([])
+  const { memberKey } = useParams<{ memberKey: string }>()
+  const [user, setUser] = useState<GetUserDataQuery['user'] | null>()
+  const [issues, setIssues] = useState<GetUserDataQuery['recentIssues']>([])
+  const [topRepositories, setTopRepositories] = useState<
+    GetUserDataQuery['topContributedRepositories']
+  >([])
+  const [milestones, setMilestones] = useState<GetUserDataQuery['recentMilestones']>([])
+  const [pullRequests, setPullRequests] = useState<GetUserDataQuery['recentPullRequests']>([])
+  const [releases, setReleases] = useState<GetUserDataQuery['recentReleases']>([])
   const [data, setData] = useState<HeatmapData>({} as HeatmapData)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [username, setUsername] = useState('')
@@ -40,7 +36,7 @@ const UserDetailsPage: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const theme = 'blue'
 
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GET_USER_DATA, {
+  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetUserDataDocument, {
     variables: { key: memberKey },
   })