0Pricing
TypeScript Academy · Lesson

Typed GraphQL Client with Apollo and urql

Use generated hooks and operations for type-safe queries.

Typed GraphQL Client with Apollo and urql is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Client Typing Problem

GraphQL clients like Apollo and urql return any typed data by default. Codegen generates typed hooks and operations that make queries fully type-safe.

// Without codegen: data is any
const { data } = useQuery(GET_USER);
data.user; // any — no safety

Operations Plugin for Apollo

Add @graphql-codegen/typescript-react-apollo to generate typed React hooks for each operation in your .graphql files.

npm install --save-dev @graphql-codegen/typescript-operations
npm install --save-dev @graphql-codegen/typescript-react-apollo

codegen.yml for Apollo Hooks

Point codegen at your .graphql operation files and the schema to generate typed hooks.

# codegen.yml
documents: "src/**/*.graphql"
generates:
  src/generated/operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

Writing a Typed Query

Write your GraphQL operation in a .graphql file and use the generated hook in your component.

# src/queries/GetUser.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

Using the Generated Hook

Import the generated hook which is fully typed: variables, data, loading, and error are all TypeScript-safe.

import { useGetUserQuery } from "./generated/operations";

function UserCard({ id }: { id: string }) {
  const { data, loading } = useGetUserQuery({ variables: { id } });
  if (loading) return <p>Loading...</p>;
  return <p>{data?.user?.name}</p>; // data.user: User | null — typed
}

urql with Codegen

For urql, use @graphql-codegen/typescript-urql to generate typed hook wrappers.

npm install --save-dev @graphql-codegen/typescript-urql
# Similar codegen.yml configuration, generates useGetUserQuery for urql

TypedDocumentNode

The lowest-level approach: use TypedDocumentNode from @graphql-typed-document-node/core to type-attach document nodes without framework-specific hooks.

import { TypedDocumentNode } from "@graphql-typed-document-node/core";
const GetUserDoc: TypedDocumentNode<GetUserQuery, GetUserQueryVariables> = gql`...`;
// Works with Apollo, urql, and any GraphQL client that supports it

Fragment Types

Codegen generates types for GraphQL fragments too, enabling type-safe fragment composition in components.

# UserFields.graphql
fragment UserFields on User {
  id
  name
}
# Generated: UserFieldsFragment type — use as prop type

Typed Mutations

Codegen also generates typed mutation hooks with typed variables and result data.

import { useCreateUserMutation } from "./generated/operations";

const [createUser, { loading }] = useCreateUserMutation();
// createUser({ variables: { input: { name, email } } })
// — variables are fully typed

Keeping Operations in Sync

When the schema changes, re-run codegen. Adding a validate-queries step catches operations that reference removed or renamed fields.

npx graphql-codegen --check
# or with graphql-inspector:
npx graphql-inspector validate ./src/**/*.graphql ./api/schema.graphql

Recap: Typed GraphQL Clients

Codegen generates typed hooks for Apollo and urql from your .graphql operation files. This gives full type safety for variables, query data, and fragment shapes — no manual type maintenance needed.

Quick Check

What does a generated typed GraphQL hook provide over using a raw document?

What You Learned

Typed GraphQL clients use codegen to generate hooks with fully typed variables and data for Apollo and urql. Write operations in .graphql files, run codegen, and get end-to-end type safety from schema to component.

Frequently asked questions

Is the “Typed GraphQL Client with Apollo and urql” lesson free?

Yes — the full text of “Typed GraphQL Client with Apollo and urql” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Typed GraphQL Client with Apollo and urql”?

Use generated hooks and operations for type-safe queries. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Typed GraphQL Client with Apollo and urql” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. GraphQL Schema to TypeScript Types
  2. Typed Resolvers with GraphQL Code Generator
  3. Typed GraphQL Client with Apollo and urql
  4. End-to-End Type Safety: Schema First Workflow
← Back to TypeScript Academy