GraphQL API Server erstellen mit Apollo Server

Haben Sie sich jemals gefragt, wie man eine leistungsstarke API erstellt, die es Clients ermöglicht, genau das anzufordern, was sie benötigen? Das ist die Magie von GraphQL, und mit Apollo Server ist der Aufbau einfacher, als Sie vielleicht denken! Wenn Sie die starren Endpunkte von REST satt haben, bietet GraphQL Flexibilität, und Apollo Server ist das ideale Werkzeug, um dies zu verwirklichen. In diesem Tutorial im Gesprächsstil führen wir Sie durch die Einrichtung eines GraphQL-Servers mit Apollo Server, von der Projektinitialisierung bis zum Testen von Abfragen und Mutationen. Egal, ob Sie JavaScript oder TypeScript verwenden, Sie werden im Handumdrehen einen laufenden Server haben. Lassen Sie uns eintauchen und etwas Großartiges mit GraphQL und Apollo Server bauen!

💡

Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem wesentlich günstigeren Preis!

Schaltfläche

Warum GraphQL und Apollo Server wählen?

Bevor wir die Ärmel hochkrempeln, lassen Sie uns darüber sprechen, warum GraphQL und Apollo Server so ein dynamisches Duo sind. GraphQL, 2012 von Facebook entwickelt und 2015 als Open Source veröffentlicht, ist eine Abfragesprache für APIs, die es Clients ermöglicht, spezifische Daten anzufordern, wodurch Over-Fetching und Under-Fetching, die bei REST APIs üblich sind, reduziert werden. Anstatt mehrerer Endpunkte haben Sie einen intelligenten Endpunkt, der maßgeschneiderte Antworten liefert. Es ist effizient, flexibel und perfekt für moderne Anwendungen mit komplexen Datenanforderungen.

Hier kommt Apollo Server, ein quelloffener, gemeinschaftsgetriebener GraphQL-Server von Apollo GraphQL. Er ist produktionsreif, unterstützt Node.js und lässt sich nahtlos in Datenbanken wie MongoDB oder PostgreSQL integrieren. Mit Funktionen wie Schema-Stitching, Caching und Echtzeit-Abonnements ist er eine Komplettlösung für den Aufbau skalierbarer APIs. Außerdem ist er anfängerfreundlich und dennoch leistungsstark für Profis. Im Vergleich zu Alternativen wie Express-GraphQL bietet Apollo Server eine bessere Leistungsüberwachung und eine einfachere Einrichtung. Wenn Sie einen Blog, eine E-Commerce-Website oder ein mobiles Backend erstellen, spart Ihnen diese Kombination Zeit und Ärger. Aufgeregt? Lassen Sie uns unser Projekt einrichten!

Ihr Projekt in JavaScript oder TypeScript einrichten

Beginnen wir mit der Schaffung der Grundlage. Wir werden ein Node.js-Projekt einrichten und die notwendigen Pakete installieren. Sie können JavaScript der Einfachheit halber oder TypeScript für Typsicherheit wählen – beides funktioniert hervorragend mit Apollo Server.

Schritt 1: Das Projekt initialisieren

Einen neuen Ordner erstellen:

Öffnen Sie Ihr Terminal und erstellen Sie ein Projektverzeichnis:

mkdir graphql-apollo-server
cd graphql-apollo-server

Node.js initialisieren:

Führen Sie die folgenden Befehle aus:

npm init -y
npm pkg set type="module"

Dadurch wird eine package.json-Datei zur Verwaltung von Abhängigkeiten erstellt und ein Projekt mit ES-Modulen eingerichtet.

Schritt 2: Abhängigkeiten installieren

Apollo Server benötigt zwei Hauptpakete: `@apollo/server` für den Server und `graphql` für die Kern-GraphQL-Bibliothek. Für TypeScript fügen wir Typen und einen Build-Schritt hinzu.

Abhängigkeiten installieren:

npm install @apollo/server graphql

Für JavaScript:

Ersetzen Sie einfach den Standardeintrag `scripts` in Ihrer `package.json`-Datei durch diese `type`- und `scripts`-Einträge:

{
	// ...etc.
	"type": "module",
    "scripts": {
    	"start": "node index.js"
    }
    // other dependencies
}

Für TypeScript (Empfohlen):

1. TypeScript initialisieren:

npm install --save-dev typescript @types/node

Erstellen Sie eine tsconfig.json-Datei in Ihrem Stammverzeichnis und bearbeiten Sie diese wie folgt:

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2023"],
    "target": "es2023",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
  }
}

2. Ersetzen Sie schließlich den `scripts`-Eintrag in Ihrer `package.json`-Datei durch die folgenden `type`- und `scripts`-Einträge:

{
	// ...etc.
    "type": "module",
    "scripts": {
    	"compile": "tsc",
    	"start": "npm run compile && node ./dist/index.js"
    }
	// other dependencies
}

Pro-Tipp: Wenn Sie neu bei TypeScript sind, fügt es Typsicherheit zu Ihrem Schema und Ihren Resolvern hinzu und fängt Fehler frühzeitig ab. JavaScript ist schneller für Prototypen – wählen Sie basierend auf der Größe Ihres Projekts.

Schritt 3: Die Serverdatei erstellen

Erstellen Sie einen `src`-Ordner im Stammverzeichnis Ihres Projekts und fügen Sie eine `index.ts`- (oder `index.js` für JavaScript) Datei in den neuen Ordner hinzu. Hier werden wir das Schema und die Resolver definieren.

Eine einfache Abfrage testen

Lassen Sie uns unsere erste Abfrage erstellen – eine einfache "Hallo"-Nachricht. Dies führt die Typdefinitionen (Schema) und Resolver (Funktionen, die Daten abrufen) von GraphQL ein.

Das GraphQL-Schema definieren

Das Schema ist der Bauplan Ihrer API. Verwenden Sie den `gql`-Tag von `graphql-tag` (im Lieferumfang von `@apollo/server` enthalten), um es zu definieren.

In `index.ts` (oder `index.js`):

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';


// Define GraphQL schema
const typeDefs = `
  type Query {
    hello: String
  }
`;

// Define resolvers
const resolvers = {
  Query: {
    hello: () => "Hello! Welcome to my server",
  },
};

// Create and start the server
const server = new ApolloServer({ typeDefs, resolvers });

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

console.log(`🚀  Server ready at: ${url}`);

Für JavaScript, Typen importieren:

const { ApolloServer } from '@apollo/server';
const { startStandaloneServer } from '@apollo/server/standalone';

// Rest is the same

Den Server starten

Starten Sie Ihren Server:

node index.js  # For JavaScript
npm start  # For TypeScript

Besuchen Sie `http://localhost:4000` in Ihrem Browser. Sie sehen den GraphQL Playground – eine webbasierte IDE zum Testen von Abfragen.

Die Abfrage testen

Führen Sie im Playground diese Abfrage im linken Bereich aus:

query {
  hello
}

Klicken Sie auf "Ausführen". Rechts sehen Sie:

{
  "data": {
    "hello": "Hello! Welcome to my server"
  }
}

Erfolg! Diese einfache Abfrage demonstriert die Grundlagen von GraphQL: einen `Query`-Typ mit einem `hello`-Feld, das einen String zurückgibt. Resolver sind die "Gehirne", die die Daten bereitstellen – in diesem Fall eine statische Nachricht. Es ist ein großartiger Ausgangspunkt, um Ihre Einrichtung zu überprüfen.

Eine Abfrage mit einem komplexen Typ testen

Fügen wir nun mit einem benutzerdefinierten Typ etwas Tiefe hinzu. Wir erstellen einen `Book`-Typ und eine Abfrage, um eine Liste von Büchern abzurufen. Dies zeigt, wie GraphQL mit strukturierten Daten umgeht.

Das Schema aktualisieren

Ändern Sie `typeDefs`, um einen `Book`-Typ einzuschließen:

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

  type Query {
    books: [Book]
  }
`;

Beispieldaten hinzufügen

Fügen Sie unterhalb der `typeDefs` die folgenden Beispieldaten für unseren neuen `Book`-Typ hinzu:

// Sample data
const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

Resolver aktualisieren

Ersetzen Sie den Resolver-Inhalt durch Folgendes für den `books`-Typ:

const resolvers = {
  Query: {
    books: () => books
  }
};

Starten Sie den Server neu und kehren Sie zum Playground zurück.

Die Abfrage testen

Ausführen:

query GetBooks {
  books {
    title
    author
  }
}

Ergebnis:

{
  "data": {
    "books": [
      {
        "title": "The Awakening",
        "author": "Kate Chopin"
      },
      {
        "title": "City of Glass",
        "author": "Paul Auster"
      }
    ]
  }
}

Cool, oder? Diese Abfrage ruft ein Array von `Book`-Objekten ab. GraphQL ermöglicht es Clients, genau anzugeben, welche Felder sie möchten – nicht mehr und nicht weniger. Wenn Sie `author` weglassen, werden nur die Titel zurückgegeben. Diese Flexibilität ist der Grund, warum GraphQL REST bei datenintensiven Anwendungen übertrifft.

Eine Mutation zum Hinzufügen von Daten testen

Abfragen dienen dem Lesen, Mutationen jedoch dem Schreiben. Fügen wir eine Mutation hinzu, um ein neues Buch zu erstellen, und demonstrieren wir, wie GraphQL mit der Datenerstellung umgeht.

Das Schema aktualisieren

Fügen Sie einen `Mutation`-Typ hinzu:

const typeDefs = `
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }

  type Mutation {
    createBook(title: String!, author: String!): Book
  }
`;

Das `!` bedeutet Pflichtfelder.

Resolver aktualisieren

const resolvers = {
  Query: {
    books: () => books,
  },
  Mutation: {
    createBook: (_: any, { title, author }: { title: string; author: string }) => {
      const newBook = { title, author };
      books.push(newBook);
      return newBook;
    }
  }  
};

Die Mutation testen

Führen Sie im Playground aus:

mutation CreateBook{
  createBook(title: "Harry Potter", author: "J.K Rowling") {
    author
    title
  }
}

Ergebnis:

{
  "data": {
    "createBook": {
      "title": "Harry Potter",
      "author": "J.K Rowling"
    }
  }
}

Zur Bestätigung führen Sie die `GetBooks`-Abfrage erneut aus:

query GetBooks {
  books {
    title
    author
  }
}

Ergebnis:

{
  "data": {
    "books": [
      {
        "title": "The Awakening",
        "author": "Kate Chopin"
      },
      {
        "title": "City of Glass",
        "author": "Paul Auster"
      },
      {
        "title": "Harry Potter",
        "author": "J.K Rowling"
      }
    ]
  }
}

Das neue Buch wurde hinzugefügt! Mutationen geben die erstellten Daten zurück, sodass Clients sofortiges Feedback erhalten. In der Produktion stellen Sie eine Verbindung zu einer Datenbank wie MongoDB für die Persistenz her.

JavaScript vs. TypeScript: Was wählen? Für schnelle Prototypen ist JavaScript in Ordnung – weniger Boilerplate. Aber für größere Projekte glänzt TypeScript mit Typsicherheit für Schemas und Resolver. TS fängt Fehler frühzeitig ab, was Ihren GraphQL-Server robuster macht.

Mehr Komplexität hinzufügen: IDs und Abfragen mit Argumenten

Um es realistischer zu gestalten, fügen Sie IDs zu Büchern hinzu und eine Abfrage, um nach Titel abzurufen.

Schema aktualisieren:

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

    type Query {
      books: [Book]
      book(title: String!): Book
    }

    type Mutation {
      createBook(title: String!, author: String!): Book
    }
`;

Daten und Resolver aktualisieren:

// Sample data
const books = [
  {
    id: 1,
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    id: 2,
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

// Resolvers 
const resolvers = {
  Query: {
    books: () => books,
    book: (_: any, { title }: { title: string }) => books.find(book => book.title === title),
  },
  Mutation: {
    createBook: (_: any, { title, author }: { title: string; author: string }) => {
      const newBook = { id: books.length + 1, title, author };
      books.push(newBook);
      return newBook;
    }
  }  
};

Die Abfrage testen:

query GetBook {
  book(title: "The Awakening") {
    id
    title
    author
  }
}

Ergebnis:

{
  "data": {
    "book": {
      "id": "1",
      "title": "The Awakening",
      "author": "Kate Chopin"
    }
  }
}

Dies zeigt Argumente in Abfragen, die es Clients ermöglichen, Daten effizient zu filtern.

Best Practices für GraphQL mit Apollo Server

Schema-Design: Halten Sie es modular mit mehreren Dateien.
Fehlerbehandlung: Verwenden Sie `ApolloError` für benutzerdefinierte Fehler.
Leistung: Aktivieren Sie Caching mit `@apollo/cache-control`.
Abonnements: Fügen Sie Echtzeitfunktionen mit `apollo-server-express` hinzu.
Überwachung: Verwenden Sie Apollo Studio für Metriken.

Häufige Probleme beheben

Server startet nicht? Überprüfen Sie die Node-Version (14+) und die Abhängigkeiten.
Abfragefehler? Überprüfen Sie die Übereinstimmung von Schema/Resolver.
CORS-Probleme? Fügen Sie `{ cors: { origin: '*' } }` zu den Serveroptionen hinzu.
TS-Fehler? Installieren Sie `@types/graphql` und `@types/node`.

Fazit

Wir haben einen robusten GraphQL-Server mit Apollo Server erstellt, von "Hallo"-Abfragen bis hin zu Mutationen. Ob in JS oder TS, Sie sind bereit, flexible APIs zu erstellen. Experimentieren Sie, fügen Sie Abonnements hinzu und stellen Sie auf Heroku bereit. GraphQL und Apollo Server sind Ihr Ticket zu effizienten APIs!

Apidog unterstützt auch das Testen mit GraphQL, also schauen Sie es sich unbedingt völlig KOSTENLOS an!

Schaltfläche