migrate web-ui to apollo client 4, apply updates

projects/README.md

@@ -77,7 +77,7 @@ Sample Code:
 ```tsx
 import GET_ACTORS_QUERY from "@/queries/GetActors.graphql";
 import type { GetActorsQuery } from "@/types";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 
 export function Actors() {
   const { data, loading, error } = useQuery<GetActorsQuery>(GET_ACTORS_QUERY);

projects/project-generator/templates/web-ui/App.tsx

@@ -1,18 +1,18 @@
 // @ts-nocheck
 import {
   ApolloClient,
+  ApolloLink,
+  HttpLink,
   InMemoryCache,
-  ApolloProvider,
-  createHttpLink,
 } from "@apollo/client";
-import { split } from "@apollo/client";
-import { getMainDefinition } from "@apollo/client/utilities";
 import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
+import { ApolloProvider } from "@apollo/client/react";
+import { getMainDefinition } from "@apollo/client/utilities";
 import { createClient } from "graphql-ws";
-import Dashboard from "./Dashboard";
 import "./App.css";
+import Dashboard from "./Dashboard";
 
-const httpLink = createHttpLink({
+const httpLink = new HttpLink({
   uri: "http://localhost:4000/graphql",
 });
 
@@ -22,7 +22,7 @@ const wsLink = new GraphQLWsLink(
   })
 );
 
-const splitLink = split(
+const splitLink = ApolloLink.split(
   ({ query }) => {
     const definition = getMainDefinition(query);
     return (

projects/project-generator/templates/web-ui/Dashboard.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
-
-import { useMutation, useQuery, useSubscription } from "@apollo/client";
+import { useMutation, useQuery, useSubscription } from "@apollo/client/react";
 import React, { useState } from "react";
 import ADD_USER from "./queries/AddUser.graphql";
 import GET_HELLO from "./queries/GetHello.graphql";

projects/web-ui/package.json

@@ -10,26 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.8",
+    "@apollo/client": "^4.0.0",
     "graphql-ws": "^6.0.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-router-dom": "^7.7.0",
-    "tailwindcss": "^4.1.11"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.8.2",
+    "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@tailwindcss/vite": "^4.1.11",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react-swc": "^3.10.2",
-    "eslint": "^9.30.1",
+    "@eslint/js": "^9.34.0",
+    "@tailwindcss/vite": "^4.1.12",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "eslint": "^9.34.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.4",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3",
     "vite-plugin-graphql-loader": "^4.0.4",
     "vite-tsconfig-paths": "^5.1.4"
   }

projects/web-ui/src/App/hooks/useRefetch.ts

@@ -1,14 +1,14 @@
+import GET_ACTORS_WITH_MOVIES_QUERY from "@/queries/GetActorsWithMovies.graphql";
+import GET_MOVIES_QUERY from "@/queries/GetMovies.graphql";
+import GET_MOVIES_WITH_ACTORS_QUERY from "@/queries/GetMoviesWithActors.graphql";
+import ON_MOVIES_RELOAD_SUBSCRIPTION from "@/queries/OnMoviesReload.graphql";
 import type {
   GetActorsWithMoviesQuery,
   GetMoviesQuery,
   GetMoviesWithActorsQuery,
   OnMoviesReloadSubscription,
 } from "@/types";
-import { useQuery, useSubscription } from "@apollo/client";
-import ON_MOVIES_RELOAD_SUBSCRIPTION from "@/queries/OnMoviesReload.graphql";
-import GET_MOVIES_QUERY from "@/queries/GetMovies.graphql";
-import GET_ACTORS_WITH_MOVIES_QUERY from "@/queries/GetActorsWithMovies.graphql";
-import GET_MOVIES_WITH_ACTORS_QUERY from "@/queries/GetMoviesWithActors.graphql";
+import { useQuery, useSubscription } from "@apollo/client/react";
 
 export function useRefetch() {
   const { refetch: refetchMovies } = useQuery<GetMoviesQuery>(GET_MOVIES_QUERY);

projects/web-ui/src/main.tsx

@@ -1,18 +1,18 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import "./index.css";
-import { App } from "./App";
 import {
   ApolloClient,
-  ApolloProvider,
+  ApolloLink,
   HttpLink,
   InMemoryCache,
-  split,
 } from "@apollo/client";
 import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
-import { createClient } from "graphql-ws";
+import { ApolloProvider } from "@apollo/client/react";
 import { getMainDefinition } from "@apollo/client/utilities";
+import { createClient } from "graphql-ws";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+import "./index.css";
 
 const httpLink = new HttpLink({
   uri: "http://localhost:4000/graphql",
@@ -24,7 +24,7 @@ const wsLink = new GraphQLWsLink(
   })
 );
 
-const splitLink = split(
+const splitLink = ApolloLink.split(
   ({ query }) => {
     const definition = getMainDefinition(query);
     return (

projects/web-ui/src/pages/ActorDetail.tsx

@@ -1,7 +1,7 @@
 import GET_ACTOR from "@/queries/GetActor.graphql";
 import type { GetActorQuery } from "@/types";
-import { useQuery } from "@apollo/client";
-import { useParams, Link } from "react-router-dom";
+import { useQuery } from "@apollo/client/react";
+import { Link, useParams } from "react-router-dom";
 
 export function ActorDetail() {
   const { id } = useParams<{ id: string }>();
@@ -20,11 +20,11 @@ export function ActorDetail() {
     <div className="p-8">
       <h1 className="text-3xl font-bold mb-4">{data.actor.name}</h1>
       <p className="text-gray-600 mb-6">Actor ID: {data.actor.id}</p>
-      
+
       <div>
         <h2 className="text-xl font-semibold mb-4">Movies</h2>
         <div className="flex flex-col gap-2">
-          {data.actor.movies?.map(movie => (
+          {data.actor.movies?.map((movie) => (
             <Link
               key={movie.id}
               to={`/movies/${movie.id}`}

projects/web-ui/src/pages/Actors.tsx

@@ -1,6 +1,6 @@
 import GET_ACTORS_QUERY from "@/queries/GetActors.graphql";
 import type { GetActorsQuery } from "@/types";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Link } from "react-router-dom";
 
 export function Actors() {

projects/web-ui/src/pages/ActorsWithMovies.tsx

@@ -1,6 +1,6 @@
 import GET_ACTORS_WITH_MOVIES_QUERY from "@/queries/GetActorsWithMovies.graphql";
 import type { GetActorsWithMoviesQuery } from "@/types";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Link } from "react-router-dom";
 
 export function ActorsWithMovies() {

projects/web-ui/src/pages/AddMovie.tsx

@@ -7,8 +7,8 @@ import type {
   GetActorsQuery,
   GetRandomWordQuery,
 } from "@/types";
-import { useMutation, useQuery } from "@apollo/client";
-import { useState } from "react";
+import { useMutation, useQuery } from "@apollo/client/react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 export function AddMovie() {
@@ -20,14 +20,17 @@ export function AddMovie() {
   const { data: actorsData, loading: actorsLoading } =
     useQuery<GetActorsQuery>(GET_ACTORS_QUERY);
 
-  const { loading: randomWordLoading, refetch: refetchRandomWord } =
-    useQuery<GetRandomWordQuery>(GET_RANDOM_WORD_QUERY, {
-      onCompleted: (data) => {
-        if (data.randomWord && !title) {
-          setTitle(data.randomWord);
-        }
-      },
-    });
+  const {
+    loading: randomWordLoading,
+    refetch: refetchRandomWord,
+    data: randomWordData,
+  } = useQuery<GetRandomWordQuery>(GET_RANDOM_WORD_QUERY);
+
+  useEffect(() => {
+    if (randomWordData?.randomWord && !title) {
+      setTitle(randomWordData.randomWord);
+    }
+  }, [randomWordData, title]);
 
   const [addMovie, { loading: addingMovie, error }] = useMutation<
     AddMovieMutation,

projects/web-ui/src/pages/Home/components/DatabaseManagement.tsx

@@ -1,6 +1,6 @@
 import DELETE_DATABASE_QUERY from "@/queries/DeleteDatabase.graphql";
 import type { DeleteDatabaseMutation } from "@/types";
-import { useMutation, useApolloClient } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useState } from "react";
 
 export function DatabaseManagement() {

projects/web-ui/src/pages/Home/components/Greetings.tsx

@@ -1,6 +1,6 @@
 import ON_GREETINGS from "@/queries/OnGreetings.graphql";
 import type { OnGreetingsSubscription } from "@/types";
-import { useSubscription } from "@apollo/client";
+import { useSubscription } from "@apollo/client/react";
 
 export function Greetings() {
   const { data: subscriptionData, loading: subscriptionLoading } =

projects/web-ui/src/pages/MovieDetail.tsx

@@ -1,7 +1,7 @@
 import GET_MOVIE from "@/queries/GetMovie.graphql";
 import type { GetMovieQuery } from "@/types";
-import { useQuery } from "@apollo/client";
-import { useParams, Link } from "react-router-dom";
+import { useQuery } from "@apollo/client/react";
+import { Link, useParams } from "react-router-dom";
 
 export function MovieDetail() {
   const { id } = useParams<{ id: string }>();
@@ -20,11 +20,11 @@ export function MovieDetail() {
     <div className="p-8">
       <h1 className="text-3xl font-bold mb-4">{data.movie.title}</h1>
       <p className="text-gray-600 mb-6">Movie ID: {data.movie.id}</p>
-      
+
       <div>
         <h2 className="text-xl font-semibold mb-4">Cast</h2>
         <div className="flex flex-col gap-2">
-          {data.movie.actors?.map(actor => (
+          {data.movie.actors?.map((actor) => (
             <Link
               key={actor.id}
               to={`/actors/${actor.id}`}

projects/web-ui/src/pages/Movies.tsx

@@ -1,6 +1,6 @@
 import GET_MOVIES_QUERY from "@/queries/GetMovies.graphql";
 import type { GetMoviesQuery } from "@/types";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Link } from "react-router-dom";
 
 export function Movies() {

projects/web-ui/src/pages/MoviesWithActors.tsx

@@ -1,6 +1,6 @@
 import GET_MOVIES_WITH_ACTORS_QUERY from "@/queries/GetMoviesWithActors.graphql";
 import type { GetMoviesWithActorsQuery } from "@/types";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Link } from "react-router-dom";
 
 export function MoviesWithActors() {