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

Einführung in die GraphQL API mit TypeScript

GraphQL ist eine moderne Abfragesprache für APIs, die es Clients ermöglicht, nur die Daten anzufordern, die sie tatsächlich benötigen. In Kombination mit TypeScript, das eine strenge Typisierung hinzufügt, wird die Entwicklung vorhersehbarer und sicherer. In diesem Schritt-für-Schritt-Tutorial erstellen wir eine vollwertige GraphQL API mit TypeScript unter Verwendung beliebter Tools und bewährter Methoden.

Warum sollte man sich für GraphQL mit TypeScript entscheiden? Erstens erhalten Sie Autovervollständigung und Typprüfung zur Kompilierungszeit. Zweitens ermöglicht GraphQL die Kombination mehrerer Abfragen in einer, wodurch die Anzahl der Netzwerkanfragen reduziert wird. Drittens eignet sich TypeScript ideal zur Beschreibung komplexer Graphdatenstrukturen.

Projekteinrichtung und Abhängigkeiten installieren

Zunächst erstellen wir ein neues Projekt und installieren die erforderlichen Pakete. Wir verwenden Apollo Server – den beliebtesten Server für GraphQL – und TypeGraphQL für eine einfache Integration mit TypeScript.

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -ynpm install apollo-server graphql reflect-metadata class-validatornpm install typescript type-graphql @types/node --save-devnpx tsc --init

Nach der Installation konfigurieren wir die tsconfig.json. Stellen Sie sicher, dass die folgenden Optionen aktiviert sind:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "lib": ["ES2020"],    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

Erstellen wir die Ordnerstruktur:

src/  ├── index.ts  ├── resolvers/  │   └── user.resolver.ts  ├── schemas/  │   └── user.schema.ts  └── data/      └── users.ts

Erstellung des Schemas und der Datentypen

In TypeGraphQL werden Datentypen mit Dekoratoren beschrieben. Erstellen wir ein Benutzermodell und einen Eingabedatentyp für Mutationen.

// src/schemas/user.schema.tsimport { ObjectType, Field, ID, InputType } from "type-graphql";

@ObjectType()export class User {  @Field(() => ID)  id!: number;

  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

@InputType()export class CreateUserInput {  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

Beachten Sie die Verwendung von @ObjectType() zur Beschreibung der Rückgabetypen und @InputType() für die Eingabeparameter. Dadurch kann TypeGraphQL automatisch das GraphQL-Schema generieren.

Implementierung der Resolver

Resolver sind Funktionen, die Abfragen verarbeiten und Daten zurückgeben. Erstellen wir ein einfaches In-Memory-Array zur Speicherung der Benutzer.

// src/data/users.tsimport { User } from "../schemas/user.schema";

export const users: User[] = [  { id: 1, name: "Ivan Petrov", email: "ivan@example.com", age: 28 },  { id: 2, name: "Maria Sidorova", email: "maria@example.com", age: 32 },];

Jetzt schreiben wir die Resolver für Abfragen und Mutationen:

// src/resolvers/user.resolver.tsimport { Resolver, Query, Mutation, Arg, Int } from "type-graphql";import { User, CreateUserInput } from "../schemas/user.schema";import { users } from "../data/users";

@Resolver()export class UserResolver {  @Query(() => [User])  async getAllUsers(): Promise<User[]> {    return users;  }

  @Query(() => User, { nullable: true })  async getUserById(    @Arg("id", () => Int) id: number  ): Promise<User | undefined> {    return users.find(user => user.id === id);  }

  @Mutation(() => User)  async createUser(    @Arg("input") input: CreateUserInput  ): Promise<User> {    const newUser: User =