GraphQL API mit TypeScript: Schritt-für-Schritt-Tutorial für Anfänger

Einführung in GraphQL und TypeScript

GraphQL ist eine Abfragesprache für APIs, die es Clients ermöglicht, nur die Daten anzufragen, die sie tatsächlich benötigen. In Kombination mit TypeScript, das JavaScript um statische Typisierung erweitert, erhalten Sie ein leistungsstarkes Werkzeug zur Erstellung zuverlässiger und skalierbarer APIs. In diesem Tutorial erstellen wir Schritt für Schritt eine einfache GraphQL-API mit TypeScript. Sie lernen, wie Sie das Projekt einrichten, das Schema definieren, Resolver schreiben und Abfragen ausführen.

Dieses Material richtet sich an Anfänger-Entwickler, die mit den Grundlagen von JavaScript vertraut sind und moderne Technologien erlernen möchten. Am Ende des Artikels können Sie selbstständig einen grundlegenden GraphQL-Server bereitstellen.

Schritt 1: Projekteinrichtung

Bevor wir Code schreiben, müssen wir das Projekt initialisieren und Abhängigkeiten installieren. Wir verwenden Apollo Server – eine der beliebtesten Bibliotheken für die Arbeit mit GraphQL in Node.js.

npm-Initialisierung

Erstellen Sie ein neues Verzeichnis und führen Sie die Initialisierung durch:

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -y

Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete:

npm install apollo-server graphqlnpm install typescript ts-node @types/node --save-dev

• apollo-server – Server zur Verarbeitung von GraphQL-Abfragen.
• graphql – Kern der GraphQL-Sprache.
• typescript und ts-node – zum Kompilieren und Ausführen von TypeScript.

TypeScript-Konfiguration

Erstellen Sie eine Datei tsconfig.json im Projektstammverzeichnis:

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

Erstellen Sie einen Ordner src und eine Datei index.ts – darin befindet sich der Hauptcode des Servers.

Schritt 2: Schema und Typen definieren

Das GraphQL-Schema beschreibt, welche Daten verfügbar sind und wie sie abgefragt werden können. In TypeScript verwenden wir einen String mit der gql-Syntax zur Definition der Typen.

Basis-Schema

Öffnen Sie src/index.ts und fügen Sie folgenden Code hinzu:

import { ApolloServer, gql } from 'apollo-server';

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

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

Hier haben wir den Typ Book mit den Feldern id, title und author definiert. Query enthält zwei Abfragen: Abrufen aller Bücher und eines einzelnen Buches anhand der ID.

Mock-Daten

Fügen Sie zum Testen ein Array mit Büchern hinzu:

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

Schritt 3: Resolver schreiben

Resolver sind Funktionen, die Daten für jedes Feld des Schemas zurückgeben. Sie verbinden das Schema mit den tatsächlichen Daten.

Implementierung der Resolver

Fügen Sie das Objekt resolvers hinzu:

const resolvers = {  Query: {    books: () => books,    book: (_: any, args: { id: string }) => {      return books.find(book => book.id === args.id);    },  },};

Das erste Argument _ ist das Elternobjekt (wird hier nicht verwendet). Das zweite Argument args enthält die Abfrageparameter, z. B. id.

Server zusammenbauen

Erstellen Sie nun eine Instanz des Servers und starten Sie ihn:

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {  console.log(`🚀 Server gestartet unter ${url}`);});

Vollständiger