GraphQL API mit TypeScript: Schritt-für-Schritt-Tutorial

GraphQL API mit TypeScript: Schritt-für-Schritt-Tutorial

GraphQL ist eine Abfragesprache für APIs, die es Clients ermöglicht, nur die Daten anzufordern, die sie benötigen. In Kombination mit TypeScript hilft die statische Typisierung, Fehler bereits in der Entwicklungsphase zu vermeiden und macht den Code vorhersagbarer. In diesem Tutorial erstellen wir eine vollwertige GraphQL-API mit Apollo Server und TypeScript.

Wir behandeln: Projekteinrichtung, Definition von Schema und Typen, Implementierung von Resolvern, Mutationen zur Datenänderung und Integration einer Datenbank (in-memory der Einfachheit halber). Am Ende des Artikels können Sie Ihren eigenen GraphQL-Server starten.

1. Projektvorbereitung und Installation der Abhängigkeiten

Als Erstes erstellen wir ein neues Node.js-Projekt und installieren die erforderlichen Pakete.

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -ynpm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

Erstellen wir die Datei tsconfig.json:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "rootDir": "./src",    "outDir": "./dist",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true  },  "include": ["src/**/*"]}

Die Projektstruktur wird wie folgt aussehen:

• src/index.ts — Einstiegspunkt
• src/schema.ts — GraphQL-Schema
• src/resolvers.ts — Resolver
• src/types.ts — TypeScript-Typen

2. Definition von Typen und GraphQL-Schema

Das GraphQL-Schema beschreibt, welche Daten verfügbar sind und wie sie abgefragt werden können. Als Beispiel erstellen wir ein einfaches System zur Verwaltung von Benutzern und Beiträgen.

Erstellen wir src/types.ts:

export interface User {  id: number;  name: string;  email: string;}

export interface Post {  id: number;  title: string;  content: string;  authorId: number;}

export interface CreateUserInput {  name: string;  email: string;}

export interface CreatePostInput {  title: string;  content: string;  authorId: number;}

Jetzt erstellen wir src/schema.ts mit der Definition der GraphQL-Typen:

import { gql } from 'apollo-server';

export const typeDefs = gql`  type User {    id: ID!    name: String!    email: String!    posts: [Post!]!  }

  type Post {    id: ID!    title: String!    content: String!    author: User!  }

  input CreateUserInput {    name: String!    email: String!  }

  input CreatePostInput {    title: String!    content: String!    authorId: ID!  }

  type Query {    users: [User!]!    user(id: ID!): User    posts: [Post!]!    post(id: ID!): Post  }

  type Mutation {    createUser(input: CreateUserInput!): User!    createPost(input: CreatePostInput!): Post!  }`;

Beachten Sie: Wir verwenden input-Typen für Mutationen – das ist eine gängige Praxis in GraphQL.

3. Implementierung der Resolver mit TypeScript

Resolver sind Funktionen, die Daten für jedes Feld des Schemas zurückgeben. Erstellen wir src/resolvers.ts:

import { User, Post, CreateUserInput, CreatePostInput } from './types';

// In-memory Datenbanklet users: User[] = [  { id: 1, name: 'Alice', email: 'alice@example.com' },  { id: 2, name: 'Bob', email: 'bob@example.com' },];

let posts: Post[] = [  { id: 1, title: 'GraphQL Basics', content: '...', authorId: 1 },  { id: 2, title: 'TypeScript Guide', content: '...', authorId: 2 },];

let nextUserId = 3;let nextPostId = 3;

export const resolvers = {  Query: {    users: (): User[] => users,    user: (_: unknown, args: { id: string }): User | undefined =>      users.find(u => u.id === Number(args.id)),    posts: (): Post[] => posts,    post: (_: unknown,