GraphQL API with TypeScript

GraphQL APIs expose typed schemas and operations. TypeScript can model resolver arguments, results, and domain objects around the GraphQL layer.

In this page:

Core Concept
Basic Setup
Typed Example
Project Usage
Best Practices

Syntax

typescript

type Resolver<TArgs, TResult> = (parent: unknown, args: TArgs, context: unknown) => Promise<TResult>;

const resolveField: Resolver<{ id: string }, TypeName> = async (parent, args, context) => {
    return { /* fields matching TypeName */ };
};

Core Concept

A typed GraphQL API keeps its TypeScript resolver types in sync with its GraphQL schema, so a resolver that returns the wrong shape for a field is caught at compile time instead of producing a confusing runtime GraphQL error.

Example: Core Concept

typescript

interface User {
  id: string;
  name: string;
}
// A resolver returning an incomplete User object is a compile-time error.
function resolveUser(): User {
  return { id: "1", name: "Ravi" };
}
console.log(resolveUser());

Basic Setup

A basic setup uses a code generator (like GraphQL Code Generator) that reads your .graphql schema files and produces matching TypeScript types and resolver signatures automatically.

Example: Basic Setup

typescript

// graphql-codegen reads schema.graphql, generates matching TS types.
// codegen.yml: { generates: { "types.ts": { plugins: ["typescript"] } } }
console.log("Code generation keeps resolver types in sync with the schema");

Typed Example

A typed example: a schema field user(id: ID!): User generates a resolver signature (parent, args: { id: string }, context) => Promise<User>, so returning an object missing a required User field is flagged immediately.

Example: Typed Example

typescript

interface User { id: string; name: string; }
interface QueryArgs { id: string; }
async function userResolver(parent: unknown, args: QueryArgs): Promise<User> {
  return { id: args.id, name: "Ravi" };
}
userResolver(null, { id: "1" }).then(console.log);

Project Usage

In a real project, regenerating types as part of the build (whenever the schema changes) keeps resolvers from silently drifting out of sync with the schema they're supposed to implement.

Example: Project Usage

typescript

// package.json: "build": "graphql-codegen && tsc"
console.log("Regenerating types on every schema change keeps resolvers honest");

Best Practices

Run code generation as an automated build/CI step rather than a manual one-off command, since a schema change that isn't followed by regeneration will leave stale, misleading types in the codebase.

Example: Best Practices

typescript

// CI step: npx graphql-codegen --check
console.log("Run codegen in CI, not just manually, to avoid stale types");

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Real-time App with Socket.io Next Lesson → Microservices with TypeScript

GraphQL API with TypeScript

Core Concept

Basic Setup

Typed Example

Project Usage

Best Practices

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code