GraphQL API mit TypeScript: Schritt-für-Schritt-Tutorial in der Praxis

Einführung in GraphQL API mit TypeScript

GraphQL ist eine Abfragesprache für Ihre API, die es Clients ermöglicht, nur die Daten anzufordern, die sie wirklich benötigen. In Kombination mit TypeScript erhalten Sie strenge Typisierung, Autovervollständigung in der IDE und weniger Fehler zur Kompilierungszeit. In diesem Tutorial erstellen wir eine vollständige GraphQL API von Grund auf mit TypeScript und Apollo Server.

Diese Anleitung richtet sich an Entwickler, die mit den Grundlagen von JavaScript und Node.js vertraut sind. Wir gehen den Weg von der Installation der Abhängigkeiten bis zum Testen der fertigen API.

1. Projekteinrichtung und Installation der Abhängigkeiten

Als erstes erstellen wir ein neues Projekt und installieren die erforderlichen Pakete. Öffnen Sie das Terminal und führen Sie Folgendes aus:

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -y

Installieren Sie TypeScript, Apollo Server und GraphQL:

npm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

Erstellen Sie die Datei tsconfig.json für die TypeScript-Konfiguration:

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

Erstellen Sie den Ordner src und die Datei src/index.ts – dies wird der Einstiegspunkt unserer Anwendung sein.

2. Erstellung des GraphQL-Schemas und der TypeScript-Typen

In GraphQL definiert das Schema die Datentypen und Operationen, die dem Client zur Verfügung stehen. Erstellen wir ein einfaches Schema zur Verwaltung von Büchern.

Datei src/schema.ts:

import { gql } from 'apollo-server';

export const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type Query {    books: [Book]    book(id: ID!): Book  }

  type Mutation {    addBook(title: String!, author: String!, publishedYear: Int): Book    deleteBook(id: ID!): Book  }`;

Jetzt definieren wir TypeScript-Interfaces für unsere Daten. Erstellen Sie src/types.ts:

export interface Book {  id: string;  title: string;  author: string;  publishedYear?: number;}

Beachten Sie: TypeScript-Interfaces werden für die interne Logik benötigt, während GraphQL-Typen für die Client-Server-Kommunikation dienen. Sie müssen aufeinander abgestimmt sein.

3. Implementierung der Resolver und des Servers

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

import { Book } from './types';

let books: Book[] = [  { id: '1', title: 'Krieg und Frieden', author: 'Leo Tolstoi', publishedYear: 1869 },  { id: '2', title: 'Verbrechen und Strafe', author: 'Fjodor Dostojewski', publishedYear: 1866 },];

export const resolvers = {  Query: {    books: (): Book[] => books,    book: (_: any, args: { id: string }): Book | undefined => {      return books.find(book => book.id === args.id);    },  },  Mutation: {    addBook: (_: any, args: { title: string; author: string; publishedYear?: number }): Book => {      const newBook: Book = {        id: String(books.length + 1),        title: args.title,        author: args.author,        publishedYear: args.publishedYear,      };      books.push(newBook);      return newBook;    },    deleteBook: (_: any, args: { id: string }): Book | null => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    },  },};

Jetzt verbinden wir alles in der Hauptdatei src/index.ts:

import { ApolloServer } from 'apollo-server';import { typeDefs } from './schema';