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

Einführung in GraphQL und seine Vorteile

GraphQL ist eine Abfragesprache und Laufzeitumgebung für APIs, entwickelt von Facebook. Im Gegensatz zu REST, wo Sie feste Datenstrukturen erhalten, ermöglicht GraphQL dem Client, nur das anzufragen, was er benötigt. Das macht APIs flexibler und effizienter.

In diesem Schritt-für-Schritt-Tutorial erstellen wir eine vollwertige GraphQL API mit JavaScript unter Verwendung von Node.js. Sie lernen, den Server einzurichten, Schemas zu definieren, Abfragen und Mutationen zu verarbeiten. Am Ende des Artikels haben Sie eine funktionierende API, bereit zur Integration in jedes Projekt.

1. Projekteinrichtung und Installation der Abhängigkeiten

Zunächst erstellen wir ein neues Node.js-Projekt und installieren die erforderlichen Pakete. Wir verwenden apollo-server – eine beliebte Bibliothek zur Erstellung von GraphQL-Servern.

Schritt 1: Projektinitialisierung

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

Schritt 2: Installation von Apollo Server und GraphQL

npm install apollo-server graphql

Nach der Installation erstellen wir die Hauptdatei index.js, in der sich unser Server befinden wird.

2. Erstellung eines grundlegenden GraphQL-Servers

Jetzt schreiben wir einen minimalen Server, der Anfragen entgegennimmt und Antworten zurückgibt. Dazu definieren wir ein Schema und Resolver.

Schritt 1: Definition des Datentyps

Wir erstellen einen einfachen Typ Book mit den Feldern id, title und author.

const { ApolloServer, gql } = require('apollo-server');\n\n// GraphQL Schema\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;\n\n// Beispieldaten (in einem echten Projekt – Datenbank)\nconst books = [\n  { id: '1', title: 'Krieg und Frieden', author: 'Leo Tolstoi' },\n  { id: '2', title: 'Verbrechen und Strafe', author: 'Fjodor Dostojewski' },\n  { id: '3', title: 'Der Meister und Margarita', author: 'Michail Bulgakow' }\n];\n\n// Resolver – Funktionen, die Daten zurückgeben\nconst resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  }\n};\n\n// Servererstellung\nconst server = new ApolloServer({ typeDefs, resolvers });\n\n// Serverstart\nserver.listen().then(({ url }) => {\n  console.log(`🚀  Server bereit unter: ${url}`);\n});

Schritt 2: Start und Test

Führen Sie den Befehl node index.js aus und öffnen Sie http://localhost:4000 im Browser. Sie sehen den GraphQL Playground – ein Werkzeug zum Testen von Abfragen.

Versuchen Sie eine einfache Abfrage:

{\n  books {\n    title\n    author\n  }\n}

Die Antwort sollte eine Liste der Bücher mit den angegebenen Feldern enthalten.

3. Hinzufügen von Mutationen und Erweiterung des Schemas

Jetzt fügen wir die Möglichkeit hinzu, Daten über Mutationen zu ändern. Dies ermöglicht das Erstellen, Aktualisieren und Löschen von Einträgen.

Schritt 1: Definition von Mutationen im Schema

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  input BookInput {\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(input: BookInput!): Book\n    deleteBook(id: ID!): Book\n  }\n`;

Schritt 2: Implementierung von Resolvern für Mutationen

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  },\n  Mutation: {\n    addBook: (parent, args) => {\n      const newBook = {\n        id: String(books.length + 1),\n        title: args.input.title,\n        author: args.input.author\n      };\n      books.push(newBook);\n      return newBook;\n    },\n    deleteBook: (parent, args) => {\n      const index = books.findIndex(book => book.id