feat: basic Apollo Client setup

frontend/app/root.tsx

@@ -12,6 +12,10 @@ import {
 } from "react-router";
 import { MainLoading } from "~/components/MainLoading/MainLoading";
 import type { Route } from "./+types/root";
+import { ApolloClient } from "@apollo/client";
+import { HttpLink } from "@apollo/client";
+import { InMemoryCache } from "@apollo/client";
+import { ApolloProvider } from "@apollo/client/react";
 import { Toaster } from "~/components/ui/Toast";
 import { TooltipProvider } from "~/components/ui/Tooltip";
 
@@ -32,6 +36,11 @@ const queryClient = new QueryClient({
   },
 });
 
+const apolloClient = new ApolloClient({
+  link: new HttpLink({ uri: "http://localhost:3001/graphql" }),
+  cache: new InMemoryCache(),
+});
+
 export function HydrateFallback() {
   return <MainLoading />;
 }
@@ -71,16 +80,18 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
-        <QueryClientProvider client={queryClient}>
-          <TooltipProvider>
-            <Header />
-            {children}
-            <Footer />
-            <ScrollRestoration />
-            <Scripts />
-            <Toaster />
-          </TooltipProvider>
-        </QueryClientProvider>
+        <ApolloProvider client={apolloClient}>
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
+              <Header />
+              {children}
+              <Footer />
+              <ScrollRestoration />
+              <Scripts />
+              <Toaster />
+            </TooltipProvider>
+          </QueryClientProvider>
+        </ApolloProvider>
       </body>
     </html>
   );

frontend/app/routes/home.tsx

@@ -4,6 +4,8 @@ import { useBooks } from "~/api/useBooks";
 import { SearchBar } from "~/components/SearchBar/SearchBar";
 import { BookCard } from "~/components/BookCard/BookCard";
 import { useBookSearchParams } from "~/api/useBookSearchParams";
+import { useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 
 export function meta() {
   return [
@@ -15,6 +17,19 @@ export function meta() {
 export default function HomePage() {
   const { query, page, filters } = useBookSearchParams();
 
+  // Simple GraphQL demo.
+  // Remove when using our own backend instead of OpenLibrary.
+  const { data: exampleBooks } = useQuery(gql`
+    query FetchBooks {
+      books {
+        title
+        author
+      }
+    }
+  `);
+
+  console.log("Fetched example books from GraphQL:", exampleBooks);
+
   const { data, isPending, isError, error } = useBooks({
     query,
     page,
@@ -25,7 +40,10 @@ export default function HomePage() {
     return (
       <main>
         <SearchBar />
-        <p role="status" className="grid place-items-center min-h-[50svh] px-10 text-center">
+        <p
+          role="status"
+          className="grid place-items-center min-h-[50svh] px-10 text-center"
+        >
           Loading books...
         </p>
       </main>
@@ -36,7 +54,10 @@ export default function HomePage() {
     return (
       <main>
         <SearchBar />
-        <p role="status" className="grid place-items-center min-h-[50svh] px-10 text-center">
+        <p
+          role="status"
+          className="grid place-items-center min-h-[50svh] px-10 text-center"
+        >
           Error: {error.message}
         </p>
       </main>
@@ -47,7 +68,10 @@ export default function HomePage() {
     return (
       <main>
         <SearchBar />
-        <p role="status" className="grid place-items-center min-h-[50svh] px-10 text-center">
+        <p
+          role="status"
+          className="grid place-items-center min-h-[50svh] px-10 text-center"
+        >
           No books found for this search
         </p>
       </main>

frontend/package.json

@@ -18,6 +18,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@apollo/client": "^4.3.1",
     "@base-ui/react": "^1.8.0",
     "@fontsource-variable/inter": "^5.3.0",
     "@react-router/node": "^8.4.0",
@@ -26,11 +27,13 @@
     "@tanstack/react-query": "^5.104.0",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
+    "graphql": "^17.0.2",
     "isbot": "^5",
     "lucide-react": "^1.49.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.4.0",
+    "rxjs": "^7.8.2",
     "shadcn": "^4.21.1",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0"