diff --git a/README.md b/README.md
index 621889f..1098753 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ src/
 
 - [x] Initial setup (folder structure, routing, styles solution, linting/formatting, error boundary, tests, CI)
 - [x] Dashboard UI (static): sidebar with mobile drawer, header, toolbar, five status columns, task cards
-- [ ] API connection — fetch tasks, loading/error/empty states
+- [x] API connection — fetch tasks into their status columns, with loading skeleton, failure alert + retry, and empty state
 - [ ] Create task
 - [ ] Update task
 - [ ] Delete task
@@ -119,6 +119,7 @@ src/
 
 - **Generated GraphQL code is committed on purpose.** `src/graphql/generated/` (output of `npm run codegen`) is checked into git so CI can typecheck and build without holding the API token. Regenerate after changing any query/mutation; never edit by hand.
 - **Quality gates are CI-enforced, not hook-enforced.** There are deliberately no git hooks (husky/lint-staged): CI runs format check, lint, typecheck, tests, and build on every PR, and the same scripts run locally on demand. Hooks can be added later if commit-time enforcement proves necessary.
+- **Card reaction icons are decorative.** The Figma shows attachment/fork/comment metrics on task cards, but the API exposes no such fields — the icons are kept for design fidelity without fabricating counts.
 - **Node 24 is a hard requirement** — `.npmrc` sets `engine-strict=true`, so `npm install` fails fast on older Node instead of warning.
 - **A11y deviation from the design, flagged and recommended per mentor guidance:** the Figma's active-tab red (`primary-4`, `#da584b`) on the dark surface measures ≈3.5:1 below WCAG AA's 4.5:1 for 15px text. Following the design team's process (flag + recommend), the active label uses `primary-3` (`#e27d73`) one step up the design system's own red scale measuring ≈4.7:1 (≈4.5:1 worst-case over the 5% gradient wash). The indicator bar stays `primary-4` (non-text graphic, 3:1 rule, passes). The active state is also conveyed non-visually via `aria-current="page"`.
 
diff --git a/codegen.ts b/codegen.ts
index 92fbc08..fbb98b8 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -27,7 +27,7 @@ const config: CodegenConfig = {
     './src/graphql/generated/': {
       preset: 'client',
       // Required by verbatimModuleSyntax: emit `import type` for type-only symbols.
-      config: { useTypeImports: true },
+      config: { useTypeImports: true, scalars: { DateTime: 'string' } },
     },
   },
 }
diff --git a/src/app/router.test.tsx b/src/app/router.test.tsx
index 55f9d8f..cf2c7b3 100644
--- a/src/app/router.test.tsx
+++ b/src/app/router.test.tsx
@@ -1,9 +1,25 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { createMemoryRouter, RouterProvider } from 'react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { routes } from '@/app/router'
+import { makeFixtureTasks, tasksRequestMock } from '@/test/fixtures'
+
+vi.mock('@/lib/graphql-client', () => ({
+  graphqlClient: { request: vi.fn() },
+}))
+
+beforeEach(() => {
+  vi.useFakeTimers({ toFake: ['Date'] })
+  vi.setSystemTime(new Date('2026-08-06T12:00:00Z'))
+  tasksRequestMock().mockReset()
+  tasksRequestMock().mockResolvedValue({ tasks: makeFixtureTasks() })
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
 
 // Fresh QueryClient per test: no cache leaks between tests, no retries
 // slowing failure cases down.
@@ -64,25 +80,28 @@ describe('sidebar navigation', () => {
 })
 
 describe('dashboard main content', () => {
-  it('renders the five required status columns', () => {
+  it('renders the five required status columns with fetched tasks', async () => {
     renderAt('/')
-    for (const title of ['Backlog', 'To Do', 'In Progress', 'Done', 'Cancelled']) {
+    expect(await screen.findByRole('heading', { level: 2, name: /backlog/i })).toBeInTheDocument()
+    for (const title of ['To Do', 'In Progress', 'Done', 'Cancelled']) {
       expect(
         screen.getByRole('heading', { level: 2, name: new RegExp(title, 'i') }),
       ).toBeInTheDocument()
     }
+    expect(screen.getByRole('heading', { level: 3, name: /slack/i })).toBeInTheDocument()
   })
 
-  it('renders a task card with its required fields', () => {
+  it('renders a task card with its required fields', async () => {
     renderAt('/')
-    const card = screen.getByRole('heading', { level: 3, name: /twitter/i }).closest('article')
+    const card = (await screen.findByRole('heading', { level: 3, name: /twitter/i })).closest(
+      'article',
+    )
     if (!card) throw new Error('expected the Twitter card to render inside an <article>')
     const scoped = within(card)
-    expect(scoped.getByText(/3 pts/i)).toBeInTheDocument()
+    expect(scoped.getByText(/8 pts/i)).toBeInTheDocument()
     expect(scoped.getByText(/yesterday/i)).toBeInTheDocument()
-    expect(scoped.getByText(/ios app/i)).toBeInTheDocument()
-    expect(scoped.getByText(/android/i)).toBeInTheDocument()
-    expect(scoped.getByRole('img', { name: /assignee/i })).toBeInTheDocument()
+    expect(scoped.getByText('REACT')).toBeInTheDocument()
+    expect(scoped.getByRole('img', { name: /unassigned/i })).toBeInTheDocument()
     expect(scoped.getByRole('img', { name: /task options/i })).toBeInTheDocument()
   })
 
@@ -103,6 +122,27 @@ describe('dashboard main content', () => {
   })
 })
 
+describe('tasks query states', () => {
+  it('shows a loading indicator while fetching', () => {
+    tasksRequestMock().mockImplementation(() => new Promise(() => undefined))
+    renderAt('/')
+    expect(screen.getByRole('status')).toHaveTextContent(/loading tasks/i)
+  })
+
+  it('indicates when the query has failed and offers a retry', async () => {
+    tasksRequestMock().mockRejectedValue(new Error('network down'))
+    renderAt('/')
+    expect(await screen.findByRole('alert')).toHaveTextContent(/something went wrong/i)
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument()
+  })
+
+  it('shows an empty state when there are no results', async () => {
+    tasksRequestMock().mockResolvedValue({ tasks: [] })
+    renderAt('/')
+    expect(await screen.findByText(/no tasks found/i)).toBeInTheDocument()
+  })
+})
+
 describe('header', () => {
   it('renders a controlled search input', async () => {
     const user = userEvent.setup()
diff --git a/src/features/tasks/Dashboard.tsx b/src/features/tasks/Dashboard.tsx
index 21168eb..c84f96c 100644
--- a/src/features/tasks/Dashboard.tsx
+++ b/src/features/tasks/Dashboard.tsx
@@ -1,13 +1,12 @@
 import { Toolbar } from '@/features/tasks/Toolbar'
-import { TaskBoard } from '@/features/tasks/TaskBoard'
-import { sampleColumns } from '@/features/tasks/sample-tasks'
+import { TasksView } from '@/features/tasks/TasksView'
 
 export function Dashboard() {
   return (
     <div className="flex h-full flex-col gap-5 lg:gap-4">
       <h1 className="sr-only">Dashboard</h1>
       <Toolbar />
-      <TaskBoard columns={sampleColumns} />
+      <TasksView />
     </div>
   )
 }
diff --git a/src/features/tasks/MyTask.tsx b/src/features/tasks/MyTask.tsx
index d8483db..6776a7e 100644
--- a/src/features/tasks/MyTask.tsx
+++ b/src/features/tasks/MyTask.tsx
@@ -1,13 +1,12 @@
 import { Toolbar } from '@/features/tasks/Toolbar'
-import { TaskBoard } from '@/features/tasks/TaskBoard'
-import { sampleColumns } from '@/features/tasks/sample-tasks'
+import { TasksView } from '@/features/tasks/TasksView'
 
 export function MyTask() {
   return (
     <div className="flex h-full flex-col gap-5 lg:gap-4">
       <h1 className="sr-only">My Task</h1>
       <Toolbar />
-      <TaskBoard columns={sampleColumns} />
+      <TasksView />
     </div>
   )
 }
diff --git a/src/features/tasks/TaskCard.tsx b/src/features/tasks/TaskCard.tsx
index e271353..b05b399 100644
--- a/src/features/tasks/TaskCard.tsx
+++ b/src/features/tasks/TaskCard.tsx
@@ -1,13 +1,16 @@
 import avatarUrl from '@/assets/avatar.png'
 import { AlarmIcon, AttachIcon, ChatIcon, DotsIcon, ForkIcon } from '@/features/tasks/icons'
-import type { Task, TagTone } from '@/features/tasks/types'
+import { dueInfo, pointsLabel, TAG_META, type TagTone } from '@/features/tasks/task-display'
+import type { ApiTask } from '@/features/tasks/types'
 
 const tagToneClasses: Record<TagTone, string> = {
   secondary: 'bg-secondary-4/10 text-secondary-4',
   tertiary: 'bg-tertiary-4/10 text-tertiary-4',
+  neutral: 'bg-neutral-2/10 text-neutral-1',
 }
 
-export function TaskCard({ task }: { task: Task }) {
+export function TaskCard({ task }: { task: ApiTask }) {
+  const due = dueInfo(task.dueDate)
   return (
     <article className="flex flex-col gap-4 rounded-lg bg-neutral-4 p-4">
       <div className="flex h-8 items-center gap-2">
@@ -19,38 +22,38 @@ export function TaskCard({ task }: { task: Task }) {
         </span>
       </div>
       <div className="flex items-center justify-between">
-        <span className="text-body-m font-semibold text-neutral-1">{task.points} Pts</span>
+        <span className="text-body-m font-semibold text-neutral-1">
+          {pointsLabel(task.pointEstimate)}
+        </span>
         <span
           className={`flex items-center gap-2 rounded px-4 py-1 text-body-m font-semibold ${
-            task.overdue ? 'bg-primary-4/10 text-primary-4' : 'bg-neutral-2/10 text-neutral-1'
+            due.overdue ? 'bg-primary-4/10 text-primary-4' : 'bg-neutral-2/10 text-neutral-1'
           }`}
         >
           <AlarmIcon className="size-6" />
-          {task.dueLabel}
+          {due.label}
         </span>
       </div>
       <div className="flex flex-wrap gap-2">
-        {task.tags.map(({ label, tone }) => (
+        {task.tags.map((tag) => (
           <span
-            key={label}
-            className={`rounded px-4 py-1 text-body-m font-semibold whitespace-nowrap ${tagToneClasses[tone]}`}
+            key={tag}
+            className={`rounded px-4 py-1 text-body-m font-semibold whitespace-nowrap ${tagToneClasses[TAG_META[tag].tone]}`}
           >
-            {label}
+            {TAG_META[tag].label}
           </span>
         ))}
       </div>
       <div className="flex items-center justify-between">
-        <img className="size-8 rounded-full" src={avatarUrl} alt="Assignee" />
+        <img
+          className="size-8 rounded-full"
+          src={task.assignee?.avatar ?? avatarUrl}
+          alt={task.assignee?.fullName ?? 'Unassigned'}
+        />
         <div className="flex items-center gap-4 text-neutral-1">
           <AttachIcon className="size-4" />
-          <span className="flex items-center gap-1 text-body-m">
-            {task.forks}
-            <ForkIcon className="size-4" />
-          </span>
-          <span className="flex items-center gap-1 text-body-m">
-            {task.comments}
-            <ChatIcon className="size-4" />
-          </span>
+          <ForkIcon className="size-4" />
+          <ChatIcon className="size-4" />
         </div>
       </div>
     </article>
diff --git a/src/features/tasks/TasksView.tsx b/src/features/tasks/TasksView.tsx
new file mode 100644
index 0000000..431eea1
--- /dev/null
+++ b/src/features/tasks/TasksView.tsx
@@ -0,0 +1,54 @@
+import { TaskBoard } from '@/features/tasks/TaskBoard'
+import { groupTasksByStatus } from '@/features/tasks/task-display'
+import { useTasks } from '@/features/tasks/useTasks'
+
+function TaskBoardSkeleton() {
+  return (
+    <>
+      <p role="status" className="sr-only">
+        Loading tasks…
+      </p>
+      <div aria-hidden="true" className="flex min-h-0 flex-1 gap-4 overflow-x-auto lg:gap-8">
+        {Array.from({ length: 5 }, (_, column) => (
+          <div key={column} className="flex w-85 shrink-0 flex-col gap-4 lg:w-87">
+            <div className="h-8 w-40 animate-pulse rounded bg-neutral-4" />
+            <div className="h-44 animate-pulse rounded-lg bg-neutral-4" />
+            <div className="h-44 animate-pulse rounded-lg bg-neutral-4" />
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export function TasksView() {
+  const { data, isPending, isError, refetch } = useTasks()
+
+  if (isPending) return <TaskBoardSkeleton />
+
+  if (isError) {
+    return (
+      <div
+        role="alert"
+        className="flex flex-col items-start gap-4 rounded-lg bg-primary-4/10 p-4 text-body-m text-primary-4"
+      >
+        <p>Something went wrong while loading tasks.</p>
+        <button
+          type="button"
+          onClick={() => {
+            void refetch()
+          }}
+          className="rounded bg-primary-4 px-4 py-1 font-semibold text-neutral-1"
+        >
+          Try again
+        </button>
+      </div>
+    )
+  }
+
+  if (data.tasks.length === 0) {
+    return <p className="p-4 text-body-m text-neutral-2">No tasks found.</p>
+  }
+
+  return <TaskBoard columns={groupTasksByStatus(data.tasks)} />
+}
diff --git a/src/features/tasks/queries.ts b/src/features/tasks/queries.ts
new file mode 100644
index 0000000..be02d45
--- /dev/null
+++ b/src/features/tasks/queries.ts
@@ -0,0 +1,20 @@
+import { graphql } from '@/graphql/generated'
+
+export const TasksDocument = graphql(`
+  query Tasks($input: FilterTaskInput!) {
+    tasks(input: $input) {
+      id
+      name
+      dueDate
+      pointEstimate
+      position
+      status
+      tags
+      assignee {
+        id
+        fullName
+        avatar
+      }
+    }
+  }
+`)
diff --git a/src/features/tasks/sample-tasks.ts b/src/features/tasks/sample-tasks.ts
deleted file mode 100644
index 0b19a20..0000000
--- a/src/features/tasks/sample-tasks.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import type { BoardColumn } from '@/features/tasks/types'
-
-const appTags = [
-  { label: 'IOS APP', tone: 'secondary' as const },
-  { label: 'ANDROID', tone: 'tertiary' as const },
-]
-
-export const sampleColumns: BoardColumn[] = [
-  {
-    title: 'Backlog',
-    tasks: [
-      {
-        id: 'backlog-1',
-        name: 'Slack',
-        points: 3,
-        dueLabel: 'TODAY',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-      {
-        id: 'backlog-2',
-        name: 'Google',
-        points: 3,
-        dueLabel: '6 JULY, 2020',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-    ],
-  },
-  {
-    title: 'To Do',
-    tasks: [
-      {
-        id: 'todo-1',
-        name: 'Twitter',
-        points: 3,
-        dueLabel: 'YESTERDAY',
-        overdue: true,
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-      {
-        id: 'todo-2',
-        name: 'Maxxis Tyres',
-        points: 3,
-        dueLabel: '6 JULY, 2020',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-    ],
-  },
-  {
-    title: 'In Progress',
-    tasks: [
-      {
-        id: 'progress-1',
-        name: 'Samsung',
-        points: 3,
-        dueLabel: '6 JULY, 2020',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-      {
-        id: 'progress-2',
-        name: 'Tesla',
-        points: 3,
-        dueLabel: 'YESTERDAY',
-        overdue: true,
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-    ],
-  },
-  {
-    title: 'Done',
-    tasks: [
-      {
-        id: 'done-1',
-        name: 'Dashboard Design',
-        points: 3,
-        dueLabel: 'TODAY',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-    ],
-  },
-  {
-    title: 'Cancelled',
-    tasks: [
-      {
-        id: 'cancelled-1',
-        name: 'Micromax Logo Design',
-        points: 3,
-        dueLabel: '6 JULY, 2020',
-        forks: 5,
-        comments: 3,
-        tags: appTags,
-      },
-    ],
-  },
-]
diff --git a/src/features/tasks/task-display.ts b/src/features/tasks/task-display.ts
new file mode 100644
index 0000000..11fcaa2
--- /dev/null
+++ b/src/features/tasks/task-display.ts
@@ -0,0 +1,55 @@
+import type { PointEstimate, Status, TaskTag } from '@/graphql/generated/graphql'
+import type { ApiTask, BoardColumn } from '@/features/tasks/types'
+
+export type TagTone = 'secondary' | 'tertiary' | 'neutral'
+
+const STATUS_COLUMNS: { status: Status; title: string }[] = [
+  { status: 'BACKLOG', title: 'Backlog' },
+  { status: 'TODO', title: 'To Do' },
+  { status: 'IN_PROGRESS', title: 'In Progress' },
+  { status: 'DONE', title: 'Done' },
+  { status: 'CANCELLED', title: 'Cancelled' },
+]
+
+export function groupTasksByStatus(tasks: ApiTask[]): BoardColumn[] {
+  return STATUS_COLUMNS.map(({ status, title }) => ({
+    title,
+    tasks: tasks
+      .filter((task) => task.status === status)
+      .toSorted((a, b) => a.position - b.position),
+  }))
+}
+
+const POINTS: Record<PointEstimate, number> = {
+  ZERO: 0,
+  ONE: 1,
+  TWO: 2,
+  FOUR: 4,
+  EIGHT: 8,
+}
+
+export function pointsLabel(estimate: PointEstimate): string {
+  return `${String(POINTS[estimate])} Pts`
+}
+
+export const TAG_META: Record<TaskTag, { label: string; tone: TagTone }> = {
+  IOS: { label: 'IOS', tone: 'secondary' },
+  ANDROID: { label: 'ANDROID', tone: 'tertiary' },
+  REACT: { label: 'REACT', tone: 'secondary' },
+  NODE_JS: { label: 'NODE JS', tone: 'tertiary' },
+  RAILS: { label: 'RAILS', tone: 'neutral' },
+}
+
+export function dueInfo(dueDate: string): { label: string; overdue: boolean } {
+  const due = new Date(dueDate)
+  const now = new Date()
+  const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime()
+  const dayDiff = Math.round((startOfDay(due) - startOfDay(now)) / 86_400_000)
+  if (dayDiff === 0) return { label: 'TODAY', overdue: false }
+  if (dayDiff === -1) return { label: 'YESTERDAY', overdue: true }
+  const month = due.toLocaleString('en-US', { month: 'long' }).toUpperCase()
+  return {
+    label: `${String(due.getDate())} ${month}, ${String(due.getFullYear())}`,
+    overdue: dayDiff < 0,
+  }
+}
diff --git a/src/features/tasks/types.ts b/src/features/tasks/types.ts
index 83b0672..1e31525 100644
--- a/src/features/tasks/types.ts
+++ b/src/features/tasks/types.ts
@@ -1,17 +1,8 @@
-export type TagTone = 'secondary' | 'tertiary'
+import type { TasksQuery } from '@/graphql/generated/graphql'
 
-export interface Task {
-  id: string
-  name: string
-  points: number
-  dueLabel: string
-  overdue?: boolean
-  forks: number
-  comments: number
-  tags: { label: string; tone: TagTone }[]
-}
+export type ApiTask = TasksQuery['tasks'][number]
 
 export interface BoardColumn {
   title: string
-  tasks: Task[]
+  tasks: ApiTask[]
 }
diff --git a/src/features/tasks/useTasks.ts b/src/features/tasks/useTasks.ts
new file mode 100644
index 0000000..1df1519
--- /dev/null
+++ b/src/features/tasks/useTasks.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+import { graphqlClient } from '@/lib/graphql-client'
+import { TasksDocument } from '@/features/tasks/queries'
+
+export function useTasks() {
+  return useQuery({
+    queryKey: ['tasks'],
+    queryFn: () => graphqlClient.request(TasksDocument, { input: {} }),
+  })
+}
diff --git a/src/graphql/generated/fragment-masking.ts b/src/graphql/generated/fragment-masking.ts
new file mode 100644
index 0000000..743a364
--- /dev/null
+++ b/src/graphql/generated/fragment-masking.ts
@@ -0,0 +1,87 @@
+/* eslint-disable */
+import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { FragmentDefinitionNode } from 'graphql';
+import type { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | undefined
+): TType | undefined;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null
+): TType | null;
+// return nullable if `fragmentType` is nullable or undefined
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
+): Array<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): Array<TType> | null | undefined;
+// return readonly array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return readonly array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}
diff --git a/src/graphql/generated/gql.ts b/src/graphql/generated/gql.ts
new file mode 100644
index 0000000..b075a30
--- /dev/null
+++ b/src/graphql/generated/gql.ts
@@ -0,0 +1,46 @@
+/* eslint-disable */
+import * as types from './graphql';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
+ */
+type Documents = {
+    "\n  query Tasks($input: FilterTaskInput!) {\n    tasks(input: $input) {\n      id\n      name\n      dueDate\n      pointEstimate\n      position\n      status\n      tags\n      assignee {\n        id\n        fullName\n        avatar\n      }\n    }\n  }\n": typeof types.TasksDocument,
+};
+const documents: Documents = {
+    "\n  query Tasks($input: FilterTaskInput!) {\n    tasks(input: $input) {\n      id\n      name\n      dueDate\n      pointEstimate\n      position\n      status\n      tags\n      assignee {\n        id\n        fullName\n        avatar\n      }\n    }\n  }\n": types.TasksDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Tasks($input: FilterTaskInput!) {\n    tasks(input: $input) {\n      id\n      name\n      dueDate\n      pointEstimate\n      position\n      status\n      tags\n      assignee {\n        id\n        fullName\n        avatar\n      }\n    }\n  }\n"): (typeof documents)["\n  query Tasks($input: FilterTaskInput!) {\n    tasks(input: $input) {\n      id\n      name\n      dueDate\n      pointEstimate\n      position\n      status\n      tags\n      assignee {\n        id\n        fullName\n        avatar\n      }\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;
\ No newline at end of file
diff --git a/src/graphql/generated/graphql.ts b/src/graphql/generated/graphql.ts
new file mode 100644
index 0000000..16ddda5
--- /dev/null
+++ b/src/graphql/generated/graphql.ts
@@ -0,0 +1,49 @@
+/* eslint-disable */
+/** Internal type. DO NOT USE DIRECTLY. */
+type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+/** Internal type. DO NOT USE DIRECTLY. */
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type FilterTaskInput = {
+  assigneeId?: string | null | undefined;
+  dueDate?: string | null | undefined;
+  name?: string | null | undefined;
+  ownerId?: string | null | undefined;
+  pointEstimate?: PointEstimate | null | undefined;
+  status?: Status | null | undefined;
+  tags?: Array<TaskTag> | null | undefined;
+};
+
+/** Estimate point for a task */
+export type PointEstimate =
+  | 'EIGHT'
+  | 'FOUR'
+  | 'ONE'
+  | 'TWO'
+  | 'ZERO';
+
+/** Status for Task */
+export type Status =
+  | 'BACKLOG'
+  | 'CANCELLED'
+  | 'DONE'
+  | 'IN_PROGRESS'
+  | 'TODO';
+
+/** Enum for tags for tasks */
+export type TaskTag =
+  | 'ANDROID'
+  | 'IOS'
+  | 'NODE_JS'
+  | 'RAILS'
+  | 'REACT';
+
+export type TasksQueryVariables = Exact<{
+  input: FilterTaskInput;
+}>;
+
+
+export type TasksQuery = { tasks: Array<{ id: string, name: string, dueDate: string, pointEstimate: PointEstimate, position: number, status: Status, tags: Array<TaskTag>, assignee: { id: string, fullName: string, avatar: string | null } | null }> };
+
+
+export const TasksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Tasks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterTaskInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"tasks"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"dueDate"}},{"kind":"Field","name":{"kind":"Name","value":"pointEstimate"}},{"kind":"Field","name":{"kind":"Name","value":"position"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"tags"}},{"kind":"Field","name":{"kind":"Name","value":"assignee"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fullName"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}}]}}]} as unknown as DocumentNode<TasksQuery, TasksQueryVariables>;
\ No newline at end of file
diff --git a/src/graphql/generated/index.ts b/src/graphql/generated/index.ts
new file mode 100644
index 0000000..f515991
--- /dev/null
+++ b/src/graphql/generated/index.ts
@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";
\ No newline at end of file
diff --git a/src/lib/graphql-client.ts b/src/lib/graphql-client.ts
index 73d96aa..afe7597 100644
--- a/src/lib/graphql-client.ts
+++ b/src/lib/graphql-client.ts
@@ -1,9 +1,5 @@
 import { GraphQLClient } from 'graphql-request'
 
-// Transport layer: every query/mutation goes through this client.
-// It calls the relative /graphql path; the dev server's proxy (vite.config.ts)
-// forwards the request to the real API and attaches the Authorization header
-// in Node, and the token never enters the browser bundle.
-// Typed documents from `npm run codegen` (TypedDocumentNode) infer both the
-// response and variable types when passed to graphqlClient.request().
-export const graphqlClient = new GraphQLClient('/graphql')
+export const graphqlClient = new GraphQLClient(
+  new URL('/graphql', window.location.origin).toString(),
+)
diff --git a/src/test/fixtures.ts b/src/test/fixtures.ts
new file mode 100644
index 0000000..91cc46b
--- /dev/null
+++ b/src/test/fixtures.ts
@@ -0,0 +1,64 @@
+import { vi } from 'vitest'
+import { graphqlClient } from '@/lib/graphql-client'
+import type { TasksQuery } from '@/graphql/generated/graphql'
+
+function daysFromNow(days: number): string {
+  const date = new Date()
+  date.setDate(date.getDate() + days)
+  return date.toISOString()
+}
+
+export function makeFixtureTasks(): TasksQuery['tasks'] {
+  return [
+    {
+      id: 'task-1',
+      name: 'Slack',
+      dueDate: daysFromNow(0),
+      pointEstimate: 'FOUR',
+      position: 1,
+      status: 'BACKLOG',
+      tags: ['IOS', 'ANDROID'],
+      assignee: { id: 'user-1', fullName: 'Jane Doe', avatar: null },
+    },
+    {
+      id: 'task-2',
+      name: 'Twitter',
+      dueDate: daysFromNow(-1),
+      pointEstimate: 'EIGHT',
+      position: 1,
+      status: 'TODO',
+      tags: ['REACT'],
+      assignee: null,
+    },
+    {
+      id: 'task-3',
+      name: 'Samsung',
+      dueDate: daysFromNow(5),
+      pointEstimate: 'TWO',
+      position: 2,
+      status: 'IN_PROGRESS',
+      tags: ['NODE_JS', 'RAILS'],
+      assignee: { id: 'user-2', fullName: 'Sam Lee', avatar: null },
+    },
+    {
+      id: 'task-4',
+      name: 'Tesla',
+      dueDate: daysFromNow(3),
+      pointEstimate: 'ONE',
+      position: 1,
+      status: 'IN_PROGRESS',
+      tags: ['ANDROID'],
+      assignee: null,
+    },
+  ]
+}
+
+type TasksRequest = () => Promise<TasksQuery>
+
+interface MockedClient {
+  request: ReturnType<typeof vi.fn<TasksRequest>>
+}
+
+export function tasksRequestMock() {
+  return (graphqlClient as unknown as MockedClient).request
+}