GraphQL API mit JavaScript: Schritt-für-Schritt-Tutorial für Node.js

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

GraphQL ist eine Abfragesprache für APIs, die es Clients ermöglicht, nur die Daten anzufordern, die sie wirklich benötigen. Im Gegensatz zu REST, wo die Antwortstruktur festgelegt ist, bietet GraphQL Flexibilität und Kontrolle. In diesem Tutorial erstellen wir eine einfache GraphQL API mit Node.js unter Verwendung der beliebten Bibliothek Apollo Server.

Sie lernen, wie Sie den Server konfigurieren, Datentypen definieren, Resolver schreiben und Abfragen und Mutationen ausführen. Alle Codebeispiele können lokal ausgeführt werden.

1. Einrichtung der Umgebung und Installation der Abhängigkeiten

Bevor Sie Code schreiben, stellen Sie sicher, dass Node.js (Version 14 oder höher) installiert ist. Erstellen Sie einen neuen Ordner für das Projekt und initialisieren Sie npm:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installieren Sie nun die erforderlichen Pakete. Die Hauptabhängigkeiten sind: express (Webframework), @apollo/server (GraphQL Server), graphql (GraphQL Kern) und cors (für Cross-Origin-Anfragen).

npm install express @apollo/server graphql cors

Erstellen Sie die Datei index.js – sie wird den gesamten Servercode enthalten.

2. Erstellung des GraphQL-Schemas und der Resolver

Das Schema ist die Beschreibung der Datentypen und Operationen (Abfragen, Mutationen). Resolver sind Funktionen, die die Daten für jedes Feld zurückgeben.

Fügen wir ein einfaches Datenmodell hinzu – eine Liste von Büchern. Jedes Buch hat eine id, einen title, einen author und ein year.

Öffnen Sie index.js und schreiben Sie den folgenden Code:

const { ApolloServer } = require('@apollo/server');const { startStandaloneServer } = require('@apollo/server/standalone');const express = require('express');const cors = require('cors');

// Simulierte Datenbanklet books = [  { id: '1', title: 'Krieg und Frieden', author: 'Lew Tolstoi', year: 1869 },  { id: '2', title: 'Verbrechen und Strafe', author: 'Fjodor Dostojewski', year: 1866 },  { id: '3', title: 'Der Meister und Margarita', author: 'Michail Bulgakow', year: 1967 }];

// Definition des Schemas (Type Definitions)const typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    year: Int  }

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

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

// Resolverconst resolvers = {  Query: {    books: () => books,    book: (parent, args) => books.find(book => book.id === args.id)  },  Mutation: {    addBook: (parent, args) => {      const newBook = {        id: String(books.length + 1),        title: args.title,        author: args.author,        year: args.year      };      books.push(newBook);      return newBook;    },    deleteBook: (parent, args) => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    }  }};

// Server startenasync function startServer() {  const app = express();  app.use(cors());

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

  const { url } = await startStandaloneServer(server, {    listen: { port: 4000 },  });

  console.log(`GraphQL Server gestartet unter ${url}`);}

startServer();

Lassen Sie uns den Code analysieren:

• typeDefs – definiert die Typen Book, Query (Abfragen) und Mutation (Änderungen).
• resolvers – enthält Funktionen für jedes Feld. Für books wird das gesamte Array zurückgegeben, für book eine Filterung nach id.
• startStandaloneServer – startet den Server auf Port 4000.

3. Testen der API über GraphQL Playground