GraphQL in TypeScript: Bibliotheken für typsichere APIs

GraphQL in TypeScript: Vollständiger Überblick über Bibliotheken und Werkzeuge

GraphQL und TypeScript sind die ideale Kombination für die Erstellung moderner APIs. TypeScript fügt statische Typisierung hinzu, die sich perfekt in das strenge Typsystem von GraphQL einfügt. In diesem Artikel behandeln wir die wichtigsten Bibliotheken und Werkzeuge für die Arbeit mit GraphQL in TypeScript, einschließlich Installation, Codebeispiele und Best Practices.

Warum TypeScript für GraphQL?

GraphQL-Abfragen und -Antworten haben eine strenge Struktur, und TypeScript ermöglicht es, diese Struktur bereits zur Kompilierzeit zu überprüfen. Dadurch wird eine ganze Klasse von Fehlern im Zusammenhang mit falschen Datentypen vermieden. Die Hauptvorteile:

• Typsicherheit — automatische Generierung von Typen aus dem GraphQL-Schema
• Autovervollständigung — die IDE schlägt Felder und Abfragetypen vor
• Refactoring — Änderungen am Schema aktualisieren automatisch alle Client-Abfragen
• Fehlerminimierung — Typfehler werden erkannt, bevor der Code ausgeführt wird

Wichtige Bibliotheken für die Serverseite

1. TypeGraphQL

TypeGraphQL ist die beliebteste Bibliothek zur Erstellung von GraphQL-APIs in TypeScript. Sie verwendet Dekorateure zur Definition von Schema und Resolvern.

Installation:

npm install type-graphql graphql reflect-metadata

Beispiel für die Deklaration eines Typs und eines Resolvers:

import { ObjectType, Field, Int, Resolver, Query, Arg } from "type-graphql";

@ObjectType()class User {  @Field(() => Int)  id: number;

  @Field()  name: string;

  @Field({ nullable: true })  email?: string;}

@Resolver(User)class UserResolver {  @Query(() => User, { nullable: true })  async user(@Arg("id", () => Int) id: number): Promise<User | null> {    // Logik zum Abrufen des Benutzers aus der Datenbank    return { id, name: "John", email: "john@example.com" };  }}

Schema-Erstellung:

import { buildSchema } from "type-graphql";

const schema = await buildSchema({  resolvers: [UserResolver],  emitSchemaFile: true,});

2. GraphQL Yoga

GraphQL Yoga ist ein universeller GraphQL-Server, der hervorragend mit TypeScript funktioniert. Er basiert auf Express, unterstützt aber jede Plattform.

Installation:

npm install graphql-yoga graphql

Beispiel eines Servers:

import { createYoga, createSchema } from "graphql-yoga";import { createServer } from "node:http";

const schema = createSchema({  typeDefs: `    type Query {      hello: String      user(id: Int!): User    }    type User {      id: Int!      name: String    }  `,  resolvers: {    Query: {      hello: () => "Hello, GraphQL!",      user: (_, { id }) => ({ id, name: "Alice" }),    },  },});

const yoga = createYoga({ schema });const server = createServer(yoga);server.listen(4000, () => console.log("Server running on http://localhost:4000/graphql"));

Bibliotheken für die Client-Seite

3. Apollo Client (mit TypeScript-Unterstützung)

Apollo Client ist ein leistungsstarker Client für die Arbeit mit GraphQL. Mit TypeScript bietet er eine vollständige Typisierung von Abfragen.

Installation:

npm install @apollo/client graphql

Beispiel einer typisierten Abfrage:

import { gql, useQuery } from "@apollo/client";

const GET_USER = gql`  query GetUser($id: Int!) {    user(id: $id) {      id      name      email    }  }`;

interface UserData {  user: {    id: number;    name: string;    email?: string;  };}

function UserProfile({ userId }: { userId: number }) {  const { loading, data } = useQuery<UserData>(GET_USER, {    variables: { id: userId },  });

  if (loading) return <p>Loading...</p>;  return <p>{data?.user.name}</p>;}