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

Einführung in GraphQL und seine Vorteile

GraphQL ist eine Abfragesprache für APIs, entwickelt von Facebook. Im Gegensatz zu REST, wo jeder Endpunkt eine feste Datenstruktur zurückgibt, erlaubt GraphQL dem Client, nur die benötigten Felder anzufragen. Das macht die API flexibler und effizienter.

In diesem Tutorial erstellen wir einen einfachen GraphQL-Server mit Node.js unter Verwendung der Bibliothek Apollo Server, richten ein Schema ein und implementieren Abfragen und Mutationen. Sie lernen:

• Wie man Apollo Server installiert und konfiguriert
• Wie man ein Schema mit Datentypen definiert
• Wie man Resolver für Abfragen und Mutationen schreibt
• Wie man die API über GraphQL Playground testet

Für die Arbeit benötigen Sie Node.js (Version 16+) und grundlegende Kenntnisse in JavaScript. Los geht's!

Schritt 1: Projekteinrichtung und Installation der Abhängigkeiten

Erstellen Sie ein neues Verzeichnis für das Projekt und initialisieren Sie die package.json:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installieren Sie die erforderlichen Pakete:

npm install apollo-server graphql

Das Paket apollo-server stellt einen fertigen HTTP-Server für GraphQL bereit, und graphql ist der Kern für die Arbeit mit Schemas und Abfragen.

Schritt 2: Erstellen eines grundlegenden Schemas und von Resolvern

Erstellen Sie die Datei index.js und importieren Sie Apollo Server:

const { ApolloServer, gql } = require('apollo-server');

// Daten im Arbeitsspeicher (Simulation einer Datenbank)const books = [  { id: '1', title: 'Krieg und Frieden', author: 'Leo 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 }];

Definieren wir nun das Schema mit dem gql-Tag:

const typeDefs = gql`  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  }`;

Erstellen Sie die Resolver – Funktionen, die Daten für jedes Abfragefeld zurückgeben:

const 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;    }  }};

Schritt 3: Server starten und testen

Erstellen Sie eine Instanz des Servers und starten Sie ihn:

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

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

Starten Sie den Server mit dem Befehl node index.js. Standardmäßig läuft Apollo Server auf Port 4000 und öffnet GraphQL Playground – eine interaktive Umgebung zum Testen von Abfragen.

Versuchen Sie eine einfache Abfrage:

query {  books {    title    author  }}

Die Antwort sollte ein Array von Büchern mit den ausgewählten Feldern enthalten:

{  "data": {    "books": [      { "title": "Krieg und Frieden", "author": "Leo Tolstoi" },      { "title": "Verbrechen und Strafe", "author": "Fjodor Dostojewski" },      { "title": "Der Meister und Margarita", "author": "Michail Bulgakow" }    ]  }}

Testen wir nun die Mutation zum Hinzufügen eines neuen Buches:

mutation {  addBook(title: "Anna Karenina", author: "Leo Tolstoi", year: 1877) {    id    title    author  }}

Nach der Ausführung der Mutation gibt der Server das Objekt des neuen Buches mit der zugewiesenen ID zurück.

Schritt 4: Erweiterung des Schemas – Beziehungen