diff --git a/CLAUDE.md b/CLAUDE.md
index c630133..66b12d7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -36,10 +36,14 @@ Chosen:
 - Client state: Zustand with persist middleware for the fridge (`localStorage`)
 - Dataset / domain: recipes, built from two Kaggle datasets (Epicurious ratings + a
   recipe/image dataset for photos), see README.md "Data"
+- GraphQL client: Apollo Client. Its normalized cache also satisfies the assignment's
+  state-management requirement for server data; Zustand (above) covers local UI state
 
 Still open (record the decision here and in README.md when made):
 
-- GraphQL client, E2E tool, UI/component lib: TBD
+- E2E tool, UI/component lib: TBD
+- Server-side filtering for "My Fridge" ingredients (tracked in a follow-up issue); for now
+  it only matches within the page already loaded from the server, not the whole dataset
 
 ## Repo layout
 
diff --git a/README.md b/README.md
index 95db018..990e4de 100644
--- a/README.md
+++ b/README.md
@@ -13,23 +13,25 @@ Hosted on the group VM: http://it2810-13.idi.ntnu.no/project2/
 | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Home** (`/`)                     | A search field (debounced by 300 ms, or press Enter to search right away), filters for category and minimum rating, and the results as a grid of recipe cards. The result count is read out to screen readers when the filters change. |
 | **Recipe detail** (`/recipes/:id`) | Photo, rating, categories, nutrition per serving, ingredients and directions. Each recipe gets its own browser tab title.                                                                                                              |
-| **My Fridge** (`/fridge`)          | Add the ingredients you have, then "Find recipes" shows the recipes that use all of them.                                                                                                                                              |
+| **My Fridge** (`/fridge`)          | Add the ingredients you have (typo-tolerant autocomplete), then "Find recipes" shows recipes that use any of them; extra ingredients in the fridge don't exclude a match.                                                              |
 | **404**                            | Shown for any unknown route.                                                                                                                                                                                                           |
 
 Search terms and filters are kept in the URL (`?q=&category=&rating=&ingredients=`),
 so the Back button and shared links bring you back to the same results.
 
 **Current status:** the backend (GraphQL API over PostgreSQL with full-text
-search, filtering, sorting and paging) is working. The frontend still uses
-mock data (`frontend/src/mocks/`) and filters it in the browser
-(`frontend/src/utils/recipeFilters.ts`). Next step is to connect it to the
-API, so that search, filtering and sorting run on the server over the whole
-dataset. User-generated data (such as reviews or ratings) is not built yet.
+search, filtering, sorting and paging) is running on the VM, and the
+frontend is connected to it with Apollo Client (`frontend/src/graphql/`) -
+search, category/rating filtering, sorting and "Load more" paging all run
+on the server over the whole dataset. The exception is "My Fridge": the
+backend has no ingredient filter yet, so it only matches within the page
+already loaded (tracked as a follow-up issue). User-generated data (such as
+reviews or ratings) is not built yet.
 
 ## Architecture
 
 ```
-Browser ── React + TypeScript (Vite), React Router
+Browser ── React + TypeScript (Vite), React Router, Apollo Client
    │         served by Apache at /project2 on the VM
    │ GraphQL
    ▼
@@ -41,9 +43,10 @@ PostgreSQL 17: recipes table, tsvector full-text search, GIN/B-tree indexes
 
 - **Frontend** (`frontend/src/`): `pages/` holds one component per route,
   `components/` holds shared parts (Navbar, Footer, RecipeCard,
-  RecipeFilter), `styles/` has one CSS file per component, and `utils/` has
-  plain logic such as reading filters from the URL. Tests (`*.test.tsx`) sit
-  next to the code they test.
+  RecipeFilter), `styles/` has one CSS file per component, `graphql/` has
+  the Apollo Client instance and queries, and `utils/` has plain logic such
+  as reading filters from the URL. Tests (`*.test.tsx`) sit next to the
+  code they test.
 - **Backend** (`backend/src/`): `schema.ts` holds the GraphQL types and
   resolvers and builds parameterised SQL in `buildRecipeQuery`.
   `server.test.ts` tests the API against a stub database.
diff --git a/frontend/package.json b/frontend/package.json
index 2977531..447ec29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,8 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@apollo/client": "^4.3.3",
+    "graphql": "^16.14.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.4.0",
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 01e6a8f..c41626b 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -1,13 +1,35 @@
 import { render, screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing/react'
 import { MemoryRouter } from 'react-router'
 import { expect, test } from 'vitest'
 import App from './App'
+import { RECIPES_QUERY } from './graphql/queries'
+
+const mocks = [
+  {
+    request: {
+      query: RECIPES_QUERY,
+      variables: {
+        search: undefined,
+        filter: { categories: undefined, minRating: undefined },
+        sort: undefined,
+        limit: 20,
+        offset: 0,
+      },
+    },
+    result: {
+      data: { recipes: { totalCount: 0, hasMore: false, items: [] } },
+    },
+  },
+]
 
 const renderAt = (path: string) =>
   render(
-    <MemoryRouter initialEntries={[path]}>
-      <App />
-    </MemoryRouter>,
+    <MockedProvider mocks={mocks}>
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    </MockedProvider>,
   )
 
 test('renders the home page heading', () => {
diff --git a/frontend/src/components/RecipeCard.tsx b/frontend/src/components/RecipeCard.tsx
index 3669afb..92eb6e5 100644
--- a/frontend/src/components/RecipeCard.tsx
+++ b/frontend/src/components/RecipeCard.tsx
@@ -1,9 +1,9 @@
 import { Link } from 'react-router'
-import type { Recipe } from '../types/recipe'
+import type { RecipeListItem } from '../graphql/queries'
 import '../styles/RecipeCard.css'
 
 type RecipeCardProps = {
-  recipe: Recipe
+  recipe: RecipeListItem
 }
 
 export default function RecipeCard({ recipe }: RecipeCardProps) {
diff --git a/frontend/src/components/RecipeFilter.test.tsx b/frontend/src/components/RecipeFilter.test.tsx
index 50c9b06..6ecb41a 100644
--- a/frontend/src/components/RecipeFilter.test.tsx
+++ b/frontend/src/components/RecipeFilter.test.tsx
@@ -40,8 +40,8 @@ test('Enter searches immediately', () => {
 
 test('selects update the URL and can be cleared', () => {
   const category = screen.getByLabelText('Category')
-  fireEvent.change(category, { target: { value: 'vegetarian' } })
-  expect(url()).toBe('?category=vegetarian')
+  fireEvent.change(category, { target: { value: 'Vegetarian' } })
+  expect(url()).toBe('?category=Vegetarian')
 
   fireEvent.change(category, { target: { value: '' } })
   expect(url()).toBe('')
@@ -49,7 +49,7 @@ test('selects update the URL and can be cleared', () => {
 
 test('offers beef and other common bases as category filters', () => {
   const category = screen.getByLabelText('Category')
-  fireEvent.change(category, { target: { value: 'beef' } })
-  expect(url()).toBe('?category=beef')
+  fireEvent.change(category, { target: { value: 'Beef' } })
+  expect(url()).toBe('?category=Beef')
   expect(screen.getByRole('option', { name: 'Lamb' })).toBeInTheDocument()
 })
diff --git a/frontend/src/components/RecipeFilter.tsx b/frontend/src/components/RecipeFilter.tsx
index 7e0e894..5c58742 100644
--- a/frontend/src/components/RecipeFilter.tsx
+++ b/frontend/src/components/RecipeFilter.tsx
@@ -69,21 +69,22 @@ export default function RecipeFilter() {
           onChange={(event) => setParam('category', event.target.value)}
         >
           <option value="">All categories</option>
-          <option value="quick & easy">Quick & Easy</option>
-          {/* Common bases for a dish. Values match dataset category names
-              case-insensitively (see filterRecipes / buildRecipeQuery). */}
-          <option value="beef">Beef</option>
-          <option value="pork">Pork</option>
-          <option value="lamb">Lamb</option>
-          <option value="chicken">Chicken</option>
-          <option value="fish">Fish</option>
-          <option value="shrimp">Shrimp</option>
-          <option value="pasta">Pasta</option>
-          <option value="rice">Rice</option>
-          <option value="vegetarian">Vegetarian</option>
-          <option value="soup">Soup</option>
-          <option value="salad">Salad</option>
-          <option value="dessert">Dessert</option>
+          <option value="Quick & Easy">Quick & Easy</option>
+          {/* Common bases for a dish. Values must match the dataset's
+              category strings exactly: the server does an array-contains
+              match (buildRecipeQuery), not a case-insensitive search. */}
+          <option value="Beef">Beef</option>
+          <option value="Pork">Pork</option>
+          <option value="Lamb">Lamb</option>
+          <option value="Chicken">Chicken</option>
+          <option value="Fish">Fish</option>
+          <option value="Shrimp">Shrimp</option>
+          <option value="Pasta">Pasta</option>
+          <option value="Rice">Rice</option>
+          <option value="Vegetarian">Vegetarian</option>
+          <option value="Soup/Stew">Soup</option>
+          <option value="Salad">Salad</option>
+          <option value="Dessert">Dessert</option>
         </select>
 
         <label htmlFor="rating" className="visually-hidden">
diff --git a/frontend/src/graphql/client.ts b/frontend/src/graphql/client.ts
new file mode 100644
index 0000000..032c204
--- /dev/null
+++ b/frontend/src/graphql/client.ts
@@ -0,0 +1,13 @@
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+
+// Relative URL: Apache proxies it to the backend in production
+// (deploy/apache/project2.conf), and Vite's dev server does the same
+// (vite.config.ts), so this works unchanged in both. VITE_GRAPHQL_URL
+// overrides it, matching IngredientSearch.tsx's raw-fetch requests.
+export const client = new ApolloClient({
+  link: new HttpLink({
+    uri:
+      import.meta.env.VITE_GRAPHQL_URL ?? `${import.meta.env.BASE_URL}graphql`,
+  }),
+  cache: new InMemoryCache(),
+})
diff --git a/frontend/src/graphql/queries.ts b/frontend/src/graphql/queries.ts
new file mode 100644
index 0000000..c0891cf
--- /dev/null
+++ b/frontend/src/graphql/queries.ts
@@ -0,0 +1,94 @@
+import { gql } from '@apollo/client'
+import type { Recipe } from '../types/recipe'
+
+// Mirrors backend/src/schema.ts. Field selections only request what each
+// view actually renders, per CLAUDE.md's sustainability guidance.
+
+export const RECIPES_QUERY = gql`
+  query Recipes(
+    $search: String
+    $filter: RecipeFilter
+    $sort: RecipeSort
+    $limit: Int
+    $offset: Int
+  ) {
+    recipes(
+      search: $search
+      filter: $filter
+      sort: $sort
+      limit: $limit
+      offset: $offset
+    ) {
+      totalCount
+      hasMore
+      items {
+        id
+        title
+        description
+        ingredients
+        categories
+        rating
+        calories
+        image
+      }
+    }
+  }
+`
+
+// Only the fields each query above actually selects, not the full Recipe type.
+export type RecipeListItem = Pick<
+  Recipe,
+  | 'id'
+  | 'title'
+  | 'description'
+  | 'ingredients'
+  | 'categories'
+  | 'rating'
+  | 'calories'
+  | 'image'
+>
+
+export type RecipeSort = 'RELEVANCE' | 'RATING' | 'CALORIES' | 'TITLE'
+
+export type RecipesQueryVariables = {
+  search?: string
+  filter?: {
+    categories?: string[]
+    maxCalories?: number
+    minRating?: number
+  }
+  sort?: RecipeSort
+  limit?: number
+  offset?: number
+}
+
+export type RecipesQueryResult = {
+  recipes: {
+    totalCount: number
+    hasMore: boolean
+    items: RecipeListItem[]
+  }
+}
+
+export const RECIPE_QUERY = gql`
+  query Recipe($id: Int!) {
+    recipe(id: $id) {
+      id
+      title
+      description
+      ingredients
+      directions
+      categories
+      rating
+      calories
+      protein
+      fat
+      sodium
+      carbs
+      image
+    }
+  }
+`
+
+export type RecipeQueryVariables = { id: number }
+export type RecipeQueryResult = { recipe: Recipe | null }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 73e5910..15afe89 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,15 +1,19 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ApolloProvider } from '@apollo/client/react'
 import { BrowserRouter } from 'react-router'
 import './styles/index.css'
 import App from './App.tsx'
+import { client } from './graphql/client.ts'
 
 // The router lives here, not in App, so tests can render App inside a
 // MemoryRouter without the /project2 basename (jsdom starts at "/").
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter basename="/project2">
-      <App />
-    </BrowserRouter>
+    <ApolloProvider client={client}>
+      <BrowserRouter basename="/project2">
+        <App />
+      </BrowserRouter>
+    </ApolloProvider>
   </StrictMode>,
 )
diff --git a/frontend/src/mocks/recipes.ts b/frontend/src/mocks/recipes.ts
deleted file mode 100644
index 24e6892..0000000
--- a/frontend/src/mocks/recipes.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Recipe } from '../types/recipe'
-
-// Static sample data until the frontend queries the GraphQL backend.
-export const mockRecipes: Recipe[] = [
-  {
-    id: 6385,
-    title: 'Ginger-Marinated Pork Tenderloin',
-    description:
-      'A flavorful pork tenderloin marinated with ginger, soy sauce and garlic.',
-    ingredients: [
-      '1 1/2 lb pork tenderloin',
-      '1/2 cup low-sodium chicken broth',
-      '1/4 cup soy sauce',
-      '2 tablespoons brown sugar',
-      '1 tablespoon grated fresh ginger',
-      '3 garlic cloves, minced',
-    ],
-    directions: [
-      'Whisk the broth, soy sauce, brown sugar, ginger and garlic in a shallow dish until the sugar dissolves.',
-      'Add the pork, turn to coat, cover and refrigerate for at least 2 hours, turning once.',
-      'Heat the oven to 425°F. Lift the pork out of the marinade and place it on a rack in a roasting pan.',
-      'Roast for 20 to 25 minutes, until a thermometer reads 145°F. Rest for 10 minutes, then slice.',
-    ],
-    categories: ['Ginger', 'Pork Tenderloin', 'Quick & Easy'],
-    rating: 4.375,
-    calories: 919,
-    protein: 87,
-    fat: 31,
-    sodium: 4704,
-    carbs: 73,
-    image: null,
-  },
-  {
-    id: 2,
-    title: 'Creamy Garlic Chicken Pasta',
-    description: 'Creamy pasta with chicken, garlic and parmesan.',
-    ingredients: [
-      '2 chicken breasts, sliced',
-      '8 oz penne pasta',
-      '4 garlic cloves, minced',
-      '1 cup heavy cream',
-      '1/2 cup grated Parmesan',
-    ],
-    directions: [
-      'Boil the pasta in salted water for 10 minutes, until al dente. Drain and set aside.',
-      'Sauté the chicken in a large skillet over medium-high heat for 6 minutes, until cooked through.',
-      'Add the garlic for 30 seconds, then stir in the cream and simmer for 3 minutes.',
-      'Fold in the Parmesan and the pasta and toss until coated. Serve immediately.',
-    ],
-    categories: ['Chicken', 'Pasta', 'Dinner'],
-    rating: 4.375,
-    calories: 720,
-    protein: 52,
-    fat: 28,
-    sodium: 1200,
-    carbs: 65,
-    image: null,
-  },
-  {
-    id: 3,
-    title: 'Fresh Tomato Pasta',
-    description: null,
-    ingredients: [
-      '12 oz spaghetti',
-      '1 lb ripe tomatoes, chopped',
-      '2 garlic cloves, sliced',
-      '1/4 cup fresh basil leaves',
-      '3 tablespoons olive oil',
-    ],
-    directions: [
-      'Cook the spaghetti in salted boiling water until al dente, about 9 minutes. Reserve 1/2 cup of the pasta water.',
-      'Warm the olive oil and garlic in a pan over medium heat for 1 minute, then add the tomatoes and cook for 8 minutes.',
-      'Toss the drained pasta in the sauce, loosening with pasta water if needed. Top with torn basil.',
-    ],
-    categories: ['Vegetarian', 'Tomato', 'Quick & Easy'],
-    rating: null,
-    calories: 540,
-    protein: 18,
-    fat: 14,
-    sodium: 680,
-    carbs: 86,
-    image: null,
-  },
-  {
-    id: 4,
-    title: 'Slow-Braised Beef Stew',
-    description: 'Tender beef with carrots and potatoes in a rich broth.',
-    ingredients: ['Beef chuck', 'Carrots', 'Potatoes', 'Onion', 'Beef broth'],
-    directions: [
-      'Brown the beef.',
-      'Add vegetables and broth.',
-      'Simmer until tender.',
-    ],
-    categories: ['Beef', 'Stew', 'Dinner'],
-    rating: 4.0,
-    calories: 610,
-    protein: 45,
-    fat: 22,
-    sodium: 900,
-    carbs: 58,
-    image: null,
-  },
-]
diff --git a/frontend/src/pages/FridgePage.test.tsx b/frontend/src/pages/FridgePage.test.tsx
index 148b18d..eee21e0 100644
--- a/frontend/src/pages/FridgePage.test.tsx
+++ b/frontend/src/pages/FridgePage.test.tsx
@@ -1,4 +1,5 @@
 import { act, fireEvent, render, screen, within } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing/react'
 import {
   MemoryRouter,
   Route,
@@ -10,6 +11,7 @@ import { afterEach, beforeEach, expect, test, vi } from 'vitest'
 import FridgePage from './FridgePage'
 import App from '../App'
 import { FRIDGE_STORAGE_KEY, useFridgeStore } from '../stores/fridgeStore'
+import { RECIPES_QUERY } from '../graphql/queries'
 
 beforeEach(() => {
   localStorage.clear()
@@ -28,11 +30,28 @@ function BackButton() {
 }
 
 test('keeps fridge ingredients through navigation and the back button', () => {
+  const recipesMock = {
+    request: {
+      query: RECIPES_QUERY,
+      variables: {
+        search: undefined,
+        filter: { categories: undefined, minRating: undefined },
+        sort: undefined,
+        limit: 20,
+        offset: 0,
+      },
+    },
+    result: {
+      data: { recipes: { totalCount: 0, hasMore: false, items: [] } },
+    },
+  }
   render(
-    <MemoryRouter initialEntries={['/fridge']}>
-      <App />
-      <BackButton />
-    </MemoryRouter>,
+    <MockedProvider mocks={[recipesMock, recipesMock, recipesMock]}>
+      <MemoryRouter initialEntries={['/fridge']}>
+        <App />
+        <BackButton />
+      </MemoryRouter>
+    </MockedProvider>,
   )
   fireEvent.change(screen.getByRole('combobox'), {
     target: { value: 'garlic' },
diff --git a/frontend/src/pages/HomePage.test.tsx b/frontend/src/pages/HomePage.test.tsx
index 3305134..71f1ea2 100644
--- a/frontend/src/pages/HomePage.test.tsx
+++ b/frontend/src/pages/HomePage.test.tsx
@@ -1,8 +1,12 @@
+import type { ComponentProps } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing/react'
 import { MemoryRouter } from 'react-router'
 import { afterEach, beforeEach, expect, test } from 'vitest'
 import App from '../App'
+import HomePage from './HomePage'
 import { useFridgeStore } from '../stores/fridgeStore'
+import { RECIPES_QUERY, type RecipeListItem } from '../graphql/queries'
 
 beforeEach(() => {
   localStorage.clear()
@@ -10,18 +14,182 @@ beforeEach(() => {
 })
 afterEach(() => localStorage.clear())
 
-function renderAt(path: string) {
-  return render(
-    <MemoryRouter initialEntries={[path]}>
-      <App />
-    </MemoryRouter>,
+const item = (overrides: Partial<RecipeListItem>): RecipeListItem => ({
+  id: 1,
+  title: 'Untitled',
+  description: null,
+  ingredients: [],
+  categories: [],
+  rating: null,
+  calories: null,
+  image: null,
+  ...overrides,
+})
+
+const defaultVariables = {
+  search: undefined,
+  filter: { categories: undefined, minRating: undefined },
+  sort: undefined,
+  limit: 20,
+  offset: 0,
+}
+
+function renderAt(
+  path: string,
+  mocks: ComponentProps<typeof MockedProvider>['mocks'],
+) {
+  render(
+    <MockedProvider mocks={mocks}>
+      <MemoryRouter initialEntries={[path]}>
+        <HomePage />
+      </MemoryRouter>
+    </MockedProvider>,
   )
 }
 
-test('shows a recipe matching part of the fridge despite extra ingredients', () => {
-  renderAt('/?ingredients=tomato,pepper')
+// Fridge tests exercise full routing (My Fridge <-> results) and the
+// Zustand-backed ingredient list, so they render the whole App.
+function renderAppAt(
+  path: string,
+  mocks: ComponentProps<typeof MockedProvider>['mocks'],
+) {
+  render(
+    <MockedProvider mocks={mocks}>
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    </MockedProvider>,
+  )
+}
+
+test('shows recipes returned by the server and the true total count', async () => {
+  renderAt('/', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 57,
+            hasMore: true,
+            items: [item({ id: 1, title: 'Tomato Soup' })],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(await screen.findByText('Tomato Soup')).toBeInTheDocument()
+  // The server's total, not just the one item loaded so far.
+  expect(screen.getByText('57 recipes')).toBeInTheDocument()
+})
+
+test('shows the empty state when the server finds no matches', async () => {
+  renderAt('/?q=nonexistent', [
+    {
+      request: {
+        query: RECIPES_QUERY,
+        variables: {
+          ...defaultVariables,
+          search: 'nonexistent',
+          sort: 'RELEVANCE',
+        },
+      },
+      result: {
+        data: { recipes: { totalCount: 0, hasMore: false, items: [] } },
+      },
+    },
+  ])
+
+  expect(
+    await screen.findByText(/no recipes match your search/i),
+  ).toBeInTheDocument()
+})
+
+test('shows an error message if the query fails', async () => {
+  renderAt('/', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      error: new Error('network down'),
+    },
+  ])
+
+  expect(
+    await screen.findByText(/something went wrong loading recipes/i),
+  ).toBeInTheDocument()
+})
+
+test('Load more fetches and appends the next page', async () => {
+  renderAt('/', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 2,
+            hasMore: true,
+            items: [item({ id: 1, title: 'Tomato Soup' })],
+          },
+        },
+      },
+    },
+    {
+      request: {
+        query: RECIPES_QUERY,
+        variables: { ...defaultVariables, offset: 1 },
+      },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 2,
+            hasMore: false,
+            items: [item({ id: 2, title: 'Carrot Cake' })],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(await screen.findByText('Tomato Soup')).toBeInTheDocument()
+  fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+
+  expect(await screen.findByText('Carrot Cake')).toBeInTheDocument()
+  expect(
+    screen.queryByRole('button', { name: /load more/i }),
+  ).not.toBeInTheDocument()
+})
+
+// The backend has no ingredient filter yet, so "My Fridge" sends no search
+// variables and matches ingredients against whatever page the server
+// returned - see HomePage.tsx and recipeFilters.ts.
+const tomatoPasta = item({
+  id: 11,
+  title: 'Fresh Tomato Pasta',
+  ingredients: ['2 cups chopped tomato', 'pasta', 'basil'],
+})
+const garlicChicken = item({
+  id: 12,
+  title: 'Creamy Garlic Chicken Pasta',
+  ingredients: ['chicken breast', 'garlic', 'parmesan'],
+})
+
+test('shows a recipe matching part of the fridge despite extra ingredients', async () => {
+  renderAppAt('/?ingredients=tomato,pepper', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 2,
+            hasMore: false,
+            items: [tomatoPasta, garlicChicken],
+          },
+        },
+      },
+    },
+  ])
+
   expect(
-    screen.getByRole('link', { name: 'Fresh Tomato Pasta' }),
+    await screen.findByRole('link', { name: 'Fresh Tomato Pasta' }),
   ).toBeInTheDocument()
   expect(
     screen.queryByRole('link', { name: 'Creamy Garlic Chicken Pasta' }),
@@ -34,14 +202,31 @@ test('shows a recipe matching part of the fridge despite extra ingredients', ()
   ).toBeInTheDocument()
 })
 
-test('offers a return to the saved fridge when no recipes match', () => {
+test('offers a return to the saved fridge when no recipes match', async () => {
   useFridgeStore.getState().addIngredient('pepper')
   useFridgeStore.getState().addIngredient('onion')
-  renderAt('/?ingredients=pepper,onion')
-  expect(screen.getByText(/No recipes match your search/)).toBeInTheDocument()
+  renderAppAt('/?ingredients=pepper,onion', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 2,
+            hasMore: false,
+            items: [tomatoPasta, garlicChicken],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(
+    await screen.findByText(/No recipes match your search/),
+  ).toBeInTheDocument()
   expect(screen.queryByRole('article')).not.toBeInTheDocument()
   const back = screen.getByRole('link', { name: 'Back to Fridge' })
   expect(back).toHaveAttribute('href', '/fridge')
+
   fireEvent.click(back)
   expect(
     screen.getByRole('heading', { level: 1, name: 'My Fridge' }),
@@ -54,16 +239,49 @@ test('offers a return to the saved fridge when no recipes match', () => {
   ).toBeInTheDocument()
 })
 
-test('offers Back to Fridge for empty results from other filters too', () => {
-  renderAt('/?q=no-such-recipe')
+test('offers Back to Fridge for empty results from other filters too', async () => {
+  renderAppAt('/?q=no-such-recipe', [
+    {
+      request: {
+        query: RECIPES_QUERY,
+        variables: {
+          ...defaultVariables,
+          search: 'no-such-recipe',
+          sort: 'RELEVANCE',
+        },
+      },
+      result: {
+        data: { recipes: { totalCount: 0, hasMore: false, items: [] } },
+      },
+    },
+  ])
+
   expect(
-    screen.getByRole('link', { name: 'Back to Fridge' }),
+    await screen.findByRole('link', { name: 'Back to Fridge' }),
   ).toBeInTheDocument()
 })
 
-test('an empty fridge filter leaves recipes visible', () => {
-  renderAt('/?ingredients=')
-  expect(screen.getAllByRole('article')).toHaveLength(3)
+test('an empty fridge filter leaves recipes visible', async () => {
+  renderAppAt('/?ingredients=', [
+    {
+      request: { query: RECIPES_QUERY, variables: defaultVariables },
+      result: {
+        data: {
+          recipes: {
+            totalCount: 3,
+            hasMore: false,
+            items: [
+              item({ id: 1, title: 'One' }),
+              item({ id: 2, title: 'Two' }),
+              item({ id: 3, title: 'Three' }),
+            ],
+          },
+        },
+      },
+    },
+  ])
+
+  expect(await screen.findAllByRole('article')).toHaveLength(3)
   expect(
     screen.queryByRole('link', { name: 'Back to Fridge' }),
   ).not.toBeInTheDocument()
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 53f9f93..0431e31 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,16 +1,87 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { useQuery } from '@apollo/client/react'
 import { NavLink, useLocation, useSearchParams } from 'react-router'
 import RecipeFilter from '../components/RecipeFilter'
 import HeroVideo from '../components/HeroVideo'
 import RecipeCard from '../components/RecipeCard'
-import { mockRecipes } from '../mocks/recipes'
+import {
+  RECIPES_QUERY,
+  type RecipesQueryResult,
+  type RecipesQueryVariables,
+} from '../graphql/queries'
 import { filterRecipes, readFilters } from '../utils/recipeFilters'
 import '../styles/HomePage.css'
 
+const PAGE_SIZE = 20
+
 export default function HomePage() {
   const [searchParams] = useSearchParams()
   const filters = readFilters(searchParams)
-  const results = filterRecipes(mockRecipes, filters)
+
+  const variables: RecipesQueryVariables = {
+    search: filters.q || undefined,
+    filter: {
+      categories: filters.category ? [filters.category] : undefined,
+      minRating: filters.minRating ?? undefined,
+    },
+    // Best text match first when the user searched; otherwise the server's
+    // own default (highest rated first).
+    sort: filters.q ? 'RELEVANCE' : undefined,
+    limit: PAGE_SIZE,
+    offset: 0,
+  }
+
+  const { data, loading, error, fetchMore } = useQuery<
+    RecipesQueryResult,
+    RecipesQueryVariables
+  >(RECIPES_QUERY, { variables })
+
+  const [isLoadingMore, setIsLoadingMore] = useState(false)
+  const loadMore = async () => {
+    const loadedCount = data?.recipes.items.length ?? 0
+    setIsLoadingMore(true)
+    try {
+      await fetchMore({
+        variables: { ...variables, offset: loadedCount },
+        updateQuery: (previous, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return previous
+          return {
+            recipes: {
+              ...fetchMoreResult.recipes,
+              items: [
+                ...previous.recipes.items,
+                ...fetchMoreResult.recipes.items,
+              ],
+            },
+          }
+        },
+      })
+    } finally {
+      setIsLoadingMore(false)
+    }
+  }
+
+  // The server already filtered by search, category and rating. Ingredients
+  // (the "My Fridge" flow) has no server-side support yet, so it's matched
+  // here against whatever page has loaded - see filterRecipes's comment.
+  const fetchedItems = data?.recipes.items ?? []
+  const results =
+    filters.ingredients.length > 0
+      ? filterRecipes(fetchedItems, {
+          q: '',
+          category: '',
+          minRating: null,
+          ingredients: filters.ingredients,
+        })
+      : fetchedItems
+
+  // With no server total to rely on for the ingredients case, announce what's
+  // actually on screen; otherwise announce the true match count, which may be
+  // larger than what's loaded so far.
+  const resultCount =
+    filters.ingredients.length > 0
+      ? results.length
+      : (data?.recipes.totalCount ?? results.length)
 
   // Links like /?ingredients=...#recipes (from My Fridge) land on the results.
   // React Router doesn't scroll to hashes by itself.
@@ -51,14 +122,25 @@ export default function HomePage() {
           Recipes
         </h2>
 
-        {/* Announced to screen readers whenever the filters change. */}
+        {/* Announced to screen readers whenever the filters or results change. */}
         <p className="recipe-results-status" aria-live="polite">
-          {results.length === 1 ? '1 recipe' : `${results.length} recipes`}
-          {filters.ingredients.length > 0 &&
-            ` matching any of: ${filters.ingredients.join(', ')}`}
+          {loading
+            ? 'Searching…'
+            : error
+              ? 'Could not load recipes.'
+              : `${resultCount === 1 ? '1 recipe' : `${resultCount} recipes`}${
+                  filters.ingredients.length > 0
+                    ? ` matching any of: ${filters.ingredients.join(', ')}`
+                    : ''
+                }`}
         </p>
 
-        {results.length === 0 ? (
+        {error ? (
+          <p className="recipe-results-error">
+            Something went wrong loading recipes. Check your connection and try
+            again.
+          </p>
+        ) : !loading && results.length === 0 ? (
           <div className="recipe-results-empty">
             <p>
               No recipes match your search. Try another word or fewer filters.
@@ -76,6 +158,17 @@ export default function HomePage() {
             ))}
           </ul>
         )}
+
+        {!error && !loading && data?.recipes.hasMore && (
+          <button
+            type="button"
+            className="load-more-button"
+            onClick={loadMore}
+            disabled={isLoadingMore}
+          >
+            {isLoadingMore ? 'Loading…' : 'Load more'}
+          </button>
+        )}
       </section>
     </>
   )
diff --git a/frontend/src/pages/RecipeDetailPage.test.tsx b/frontend/src/pages/RecipeDetailPage.test.tsx
index 9522a21..93113f5 100644
--- a/frontend/src/pages/RecipeDetailPage.test.tsx
+++ b/frontend/src/pages/RecipeDetailPage.test.tsx
@@ -1,23 +1,68 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing/react'
 import { MemoryRouter, Route, Routes } from 'react-router'
 import { expect, test } from 'vitest'
 import RecipeDetailPage from './RecipeDetailPage'
+import { RECIPE_QUERY } from '../graphql/queries'
+import type { Recipe } from '../types/recipe'
+
+const porkTenderloin: Recipe = {
+  id: 6385,
+  title: 'Ginger-Marinated Pork Tenderloin',
+  description:
+    'A flavorful pork tenderloin marinated with ginger, soy sauce and garlic.',
+  ingredients: [
+    '1 1/2 lb pork tenderloin',
+    '1/2 cup low-sodium chicken broth',
+    '1/4 cup soy sauce',
+    '2 tablespoons brown sugar',
+    '1 tablespoon grated fresh ginger',
+    '3 garlic cloves, minced',
+  ],
+  directions: [
+    'Whisk the broth, soy sauce, brown sugar, ginger and garlic in a shallow dish until the sugar dissolves.',
+    'Add the pork, turn to coat, cover and refrigerate for at least 2 hours, turning once.',
+    'Heat the oven to 425°F. Lift the pork out of the marinade and place it on a rack in a roasting pan.',
+    'Roast for 20 to 25 minutes, until a thermometer reads 145°F. Rest for 10 minutes, then slice.',
+  ],
+  categories: ['Ginger', 'Pork Tenderloin', 'Quick & Easy'],
+  rating: 4.375,
+  calories: 919,
+  protein: 87,
+  fat: 31,
+  sodium: 4704,
+  carbs: 73,
+  image: null,
+}
+
+const mocks = [
+  {
+    request: { query: RECIPE_QUERY, variables: { id: 6385 } },
+    result: { data: { recipe: porkTenderloin } },
+  },
+  {
+    request: { query: RECIPE_QUERY, variables: { id: 999999 } },
+    result: { data: { recipe: null } },
+  },
+]
 
 function renderAt(path: string) {
   render(
-    <MemoryRouter initialEntries={[path]}>
-      <Routes>
-        <Route path="/recipes/:id" element={<RecipeDetailPage />} />
-      </Routes>
-    </MemoryRouter>,
+    <MockedProvider mocks={mocks}>
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route path="/recipes/:id" element={<RecipeDetailPage />} />
+        </Routes>
+      </MemoryRouter>
+    </MockedProvider>,
   )
 }
 
-test('shows the full recipe for a known id', () => {
+test('shows the full recipe for a known id', async () => {
   renderAt('/recipes/6385')
 
   expect(
-    screen.getByRole('heading', {
+    await screen.findByRole('heading', {
       level: 1,
       name: 'Ginger-Marinated Pork Tenderloin',
     }),
@@ -35,21 +80,23 @@ test('shows the full recipe for a known id', () => {
   ).toHaveAttribute('href', '/')
 })
 
-test('shows breadcrumbs ending in the recipe title', () => {
+test('shows breadcrumbs ending in the recipe title', async () => {
   renderAt('/recipes/6385')
 
-  const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
-  expect(nav).toHaveTextContent('Ginger-Marinated Pork Tenderloin')
+  const nav = await screen.findByRole('navigation', { name: 'Breadcrumb' })
+  await waitFor(() =>
+    expect(nav).toHaveTextContent('Ginger-Marinated Pork Tenderloin'),
+  )
   expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute(
     'href',
     '/',
   )
 })
 
-test('shows a not-found message for an unknown id', () => {
+test('shows a not-found message for an unknown id', async () => {
   renderAt('/recipes/999999')
 
   expect(
-    screen.getByRole('heading', { level: 1, name: 'Recipe not found' }),
+    await screen.findByRole('heading', { level: 1, name: 'Recipe not found' }),
   ).toBeInTheDocument()
 })
diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx
index ad9756b..d28b70f 100644
--- a/frontend/src/pages/RecipeDetailPage.tsx
+++ b/frontend/src/pages/RecipeDetailPage.tsx
@@ -1,8 +1,13 @@
 import { useEffect } from 'react'
+import { useQuery } from '@apollo/client/react'
 import { Link, useParams } from 'react-router'
 import Breadcrumbs from '../components/Breadcrumbs'
 import UnitToggle from '../components/UnitToggle'
-import { mockRecipes } from '../mocks/recipes'
+import {
+  RECIPE_QUERY,
+  type RecipeQueryResult,
+  type RecipeQueryVariables,
+} from '../graphql/queries'
 import { convertText } from '../utils/units'
 import { useUnitSystem } from '../utils/useUnitSystem'
 import type { Recipe } from '../types/recipe'
@@ -32,14 +37,35 @@ export default function RecipeDetailPage() {
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [id])
-  const recipe = mockRecipes.find((r) => r.id === Number(id))
 
-  if (!recipe) {
+  const numericId = Number(id)
+  const { data, loading, error } = useQuery<
+    RecipeQueryResult,
+    RecipeQueryVariables
+  >(RECIPE_QUERY, {
+    variables: { id: numericId },
+    skip: !id || Number.isNaN(numericId),
+  })
+  const recipe = data?.recipe
+
+  if (loading) {
+    return (
+      <section className="recipe-detail recipe-detail-missing">
+        <p>Loading recipe…</p>
+      </section>
+    )
+  }
+
+  if (error || !recipe) {
     return (
       <section className="recipe-detail recipe-detail-missing">
         <title>Recipe not found</title>
         <h1>Recipe not found</h1>
-        <p>We could not find a recipe with this id.</p>
+        <p>
+          {error
+            ? 'Something went wrong loading this recipe.'
+            : 'We could not find a recipe with this id.'}
+        </p>
         <Link to="/" className="recipe-detail-back">
           ← Back to recipes
         </Link>
diff --git a/frontend/src/styles/HomePage.css b/frontend/src/styles/HomePage.css
index 9a8a6e9..9e588d2 100644
--- a/frontend/src/styles/HomePage.css
+++ b/frontend/src/styles/HomePage.css
@@ -87,13 +87,15 @@
 }
 
 .recipe-results-status,
-.recipe-results-empty {
+.recipe-results-empty,
+.recipe-results-error {
   margin: 0 auto;
   text-align: center;
   color: var(--color-text-muted);
 }
 
-.recipe-results-empty {
+.recipe-results-empty,
+.recipe-results-error {
   margin-top: 2rem;
 }
 
@@ -101,6 +103,38 @@
   margin-top: 0.5rem;
 }
 
+.load-more-button {
+  display: block;
+  margin: 2.5rem auto 0;
+  padding: 0.8rem 1.5rem;
+
+  border: 2px solid var(--color-button-bg);
+  border-radius: 0.5rem;
+
+  background-color: var(--color-button-bg);
+  color: var(--color-button-text);
+
+  font: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    color 0.3s ease;
+}
+
+.load-more-button:hover:not(:disabled) {
+  background-color: var(--color-button-hover-bg);
+  border-color: var(--color-button-hover-bg);
+  color: var(--color-button-hover-text);
+}
+
+.load-more-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 .recipe-grid {
   width: min(92%, 75rem);
   margin: 2rem auto 0;
diff --git a/frontend/src/utils/recipeFilters.ts b/frontend/src/utils/recipeFilters.ts
index 5c09870..63b85ee 100644
--- a/frontend/src/utils/recipeFilters.ts
+++ b/frontend/src/utils/recipeFilters.ts
@@ -30,9 +30,11 @@ export function readFilters(params: URLSearchParams): RecipeFilters {
   }
 }
 
-// ponytail: client-side filtering of the mock list only. The assignment
-// requires filtering on the whole result set, which moves to the server
-// (buildRecipeQuery) when the frontend is wired to the API.
+// q, category and minRating are now sent to the server (buildRecipeQuery)
+// instead, per the assignment's "filter the whole result set" requirement.
+// HomePage still calls this with only `ingredients` set, to match the
+// "My Fridge" ingredients against the page the server already returned -
+// the backend has no ingredient filter yet (see the issue tracking that).
 export function filterRecipes<T extends FilterableRecipe>(
   recipes: T[],
   { q, category, minRating, ingredients }: RecipeFilters,
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 77f11b2..865da69 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -7,9 +7,12 @@ export default defineConfig({
   base: '/project2/',
   server: {
     proxy: {
+      // Mirrors deploy/apache/project2.conf's ProxyPass in production, so
+      // the frontend can always call the same relative URL in dev and prod.
       '/project2/graphql': {
         target: 'http://localhost:3001',
-        rewrite: () => '/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/project2\/graphql/, ''),
       },
     },
   },
diff --git a/package-lock.json b/package-lock.json
index 9af3d30..9691323 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,8 @@
     "frontend": {
       "version": "0.0.0",
       "dependencies": {
+        "@apollo/client": "^4.3.3",
+        "graphql": "^16.14.2",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
         "react-router": "^8.4.0",
@@ -71,6 +73,43 @@
         "graphql": "14.x || 15.x || 16.x"
       }
     },
+    "node_modules/@apollo/client": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-4.3.3.tgz",
+      "integrity": "sha512-wMfOUaFKLgNsu0OMCg50gfhEHTV9/GyO7DxQvut7iSBUoePy0kvll3oWeY8KVPRfnVhYEzcwPJ/Jwz4uSe3fQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.1.1",
+        "@wry/caches": "^1.0.0",
+        "@wry/equality": "^0.5.6",
+        "@wry/trie": "^0.5.0",
+        "graphql-tag": "^2.12.6",
+        "optimism": "^0.18.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "graphql": "^16.0.0 || ^17.0.0",
+        "graphql-ws": "^5.5.5 || ^6.0.3",
+        "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc",
+        "react-dom": "^17.0.0 || ^18.0.0 || >=19.0.0-rc",
+        "rxjs": "^7.3.0",
+        "subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
+      },
+      "peerDependenciesMeta": {
+        "graphql-ws": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@apollo/protobufjs": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@apollo/protobufjs/-/protobufjs-1.2.8.tgz",
@@ -2154,6 +2193,54 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@wry/caches": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
+      "integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/context": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
+      "integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/equality": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
+      "integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/trie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
+      "integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2769,6 +2856,21 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/graphql-tag": {
+      "version": "2.12.7",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.7.tgz",
+      "integrity": "sha512-xnE/NFzy+0eIesvAsREJZ284zTl/wYuBAvpsFSDhRGRdRHdnE90M21Q3xAWyYInb0J756c6x0pIQ62+vtvOs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -3466,6 +3568,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/optimism": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.1.tgz",
+      "integrity": "sha512-mLXNwWPa9dgFyDqkNi54sjDyNJ9/fTI6WGBLgnXku1vdKY/jovHfZT5r+aiVeFFLOz+foPNOm5YJ4mqgld2GBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@wry/caches": "^1.0.0",
+        "@wry/context": "^0.7.0",
+        "@wry/trie": "^0.5.0",
+        "tslib": "^2.3.0"
+      }
+    },
     "node_modules/oxlint": {
       "version": "1.85.0",
       "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.85.0.tgz",
@@ -3914,6 +4028,16 @@
         "@rolldown/binding-win32-x64-msvc": "1.2.11"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
diff --git a/package.json b/package.json
index f89a0d2..0a676ea 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,8 @@
   "devDependencies": {
     "oxlint": "^1.85.0",
     "prettier": "^3.9.9"
+  },
+  "allowScripts": {
+    "@apollo/protobufjs@1.2.8": true
   }
 }