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

Einführung in die GraphQL API mit JavaScript

GraphQL ist eine Abfragesprache für APIs, die von Facebook entwickelt wurde. Im Gegensatz zu REST, wo jeder Endpunkt eine feste Datenstruktur zurückgibt, erlaubt GraphQL dem Client, nur die Felder anzufragen, die er benötigt. Dies reduziert die übertragene Datenmenge und vereinfacht die Entwicklung komplexer Anwendungen.

In diesem Tutorial erstellen wir eine vollständige GraphQL API mit Node.js unter Verwendung von Apollo Server. Sie lernen, Schemas zu definieren, Resolver zu schreiben sowie Abfragen und Mutationen durchzuführen. Alle Codebeispiele sind startbereit und praxiserprobt.

Für die Arbeit benötigen Sie Node.js Version 14 oder höher und grundlegende JavaScript-Kenntnisse. Wenn Sie mit Express.js vertraut sind, wird Ihnen Apollo Server sehr ähnlich vorkommen – es verwendet ebenfalls Middleware und arbeitet mit HTTP.

Projektinstallation und -einrichtung

Erstellen Sie ein neues Verzeichnis und initialisieren Sie das Projekt:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installieren Sie die erforderlichen Abhängigkeiten:

npm install @apollo/server graphqlnpm install nodemon --save-dev

Erstellen Sie die Datei index.js – dies wird der Einstiegspunkt unserer Anwendung sein.

Die grundlegende Projektstruktur sieht wie folgt aus:

graphql-tutorial/├── node_modules/├── index.js├── package.json└── package-lock.json

Erstellung des ersten GraphQL Servers

Beginnen wir mit einem minimalen Server, der eine einfache Nachricht zurückgibt. Öffnen Sie index.js und fügen Sie den folgenden Code hinzu:

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

// Definieren des GraphQL Schemasconst typeDefs = `#graphql  type Query {    hello: String  }`;

// Resolver für die hello-Abfrageconst resolvers = {  Query: {    hello: () => 'Hallo Welt! Dies ist die erste GraphQL Abfrage!',  },};

// Erstellen der Serverinstanzconst server = new ApolloServer({  typeDefs,  resolvers,});

// Server startenconst { url } = await startStandaloneServer(server, {  listen: { port: 4000 },});

console.log(`🚀 Server läuft unter: ${url}`);

Starten Sie den Server mit dem Befehl node index.js. Öffnen Sie den Browser und gehen Sie zu http://localhost:4000. Sie sehen die Apollo Sandbox-Oberfläche, in der Sie Abfragen ausführen können.

Geben Sie im linken Bereich ein:

query {  hello}

Und klicken Sie auf die Schaltfläche "Run". Als Antwort erhalten Sie:

{  "data": {    "hello": "Hallo Welt! Dies ist die erste GraphQL Abfrage!"  }}

Arbeiten mit Datentypen und komplexen Abfragen

GraphQL ermöglicht die Definition eigener Datentypen. Erstellen wir ein Benutzer- und Buchmodell für unsere API.

Aktualisieren Sie die Datei index.js:

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

// Definieren der Typenconst typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type User {    id: ID!    name: String!    email: String!    books: [Book]  }

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

// Testdatenconst books = [  { id: '1', title: 'Harry Potter', author: 'J.K. Rowling', publishedYear: 1997 },  { id: '2', title: 'Der Herr der Ringe', author: 'J.R.R. Tolkien', publishedYear: 1954 },  { id: '3', title: '1984', author: 'George Orwell', publishedYear: 1949 },];

const users = [  { id: '1', name: 'Ivan Ivanov', email: 'ivan@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'Anna Petrova', email: 'anna@example.com', bookIds: ['3'] },];

// Resolverconst resolvers = {  Query: {    books: () => books,    book: (_, { id }) => books.find(book => book.id === id),    users: () => users,    user: (_, { i