GraphQL

Die GraphQL Abfragesprache verstehen

Die GraphQL-Abfragesprache arbeitet mit drei grundlegenden Operationen: Abfragen (fragen die Daten ab), Mutationen (verändern die Daten) und Abonnements (melden sich zu Updates an). In einer Abfrage können verschiedene Felder ausgewählt und Daten von unterschiedlichen Ressourcen in einer einzigen Anfrage abgerufen werden. Dies differenziert GraphQL stark von REST-APIs, bei denen multiple Inhalte nur durch mehrere Anfragen erreichbar sind.

query {
  student (id: "1") {
    name
    age
  }
}

Das GraphQL Datenmodellierungskonzept

Im Gegensatz zu relationalen Datenbanken, die Tabellen verwenden, arbeiten GraphQL-APIs mit einer Menge von Typen, der sogenannten "Schema Definition Language" (SDL). GraphQL bietet verschiedene Typen an, darunter Skalare, Enums, Interfaces und Unionstypen.

Volle Kontrolle mit GraphQL Mutation

Mutationen in GraphQL ermöglichen es Clients, Daten zu ändern. Sie sind vergleichbar mit den PUT, POST, PATCH und DELETE Methoden in REST-APIs. Mutationen folgen den gleichen strukturellen Regeln wie Abfragen, aber anstatt Daten abzurufen, werden sie geändert oder erstellt. Jede Mutation hat eine Reihe von Argumenten, die den wsie einer Funktion in anderen Programmiersprachen ähneln.

GraphQL vs REST: Vorteile und Nachteile

Bei der Auswahl zwischen GraphQL und REST für die Anwendungsentwicklung gibt es eine Reihe von Faktoren zu berücksichtigen. Beide Technologien haben ihre eigenen Stärken und Schwächen und die Wahl hängt oft von den spezifischen Anforderungen eines Projekts ab.

Warum GraphQL eine Alternative zu REST ist

Die Abfrageflexibilität ist ein entscheidender Vorteil von GraphQL gegenüber REST. Da Clients nur die Daten anfordern können, die sie benötigen, wird Overfetching vermieden - ein häufiges Problem bei REST-APIs, wo die Antwort oft mehr Daten enthält, als benötigt.

Zudem kann GraphQL dank der starken Typisierung dazu beitragen, dass die Datenqualität verbessert wird. Da der Typ jedes Felds im Schema definiert ist, kann GraphQL sicherstellen, dass die Clients immer die richtige Art von Daten erhalten und die Server immer korrekte Daten annehmen.

Ein Nachteil von GraphQL kann jedoch die erhöhte Komplexität sein. Während REST einfacher zu verstehen und zu nutzen ist, kann GraphQL aufgrund seiner Flexibilität und der Vielfalt an Optionen, die es bietet, komplizierter erscheinen.

Die Rolle von GraphQL Server und Client

Um GraphQL nutzen zu können, benötigst du sowohl einen GraphQL-Server als auch einen Client. Der Server ist dafür zuständig, Anfragen zu entgegen und Antworten zurückzusenden. Er prüft die Anfragen, validiert sie gegen das Schema und führt sie dann aus.

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello world!'
};

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000);

Der Client hingegen sendet Anfragen an den Server und verarbeitet die Antworten. Es gibt verschiedene GraphQL-Clients zur Auswahl, darunter Apollo Client, Relay und urql. Sie bieten Funktionen wie caching, pagination und Server state management.

Beispiele für den Einsatz von GraphQL und REST

query {
  post(id: "{post_id}") {
    comments {
      text
      author
    }
  }
}

Hands-on mit GraphQL: Beispiele

Im Folgenden findest du praktische Beispiele, um ein besseres Verständnis für den Umgang mit GraphQL zu erhalten. Dabei lernst du, wie man eine einfache GraphQL-Abfrage erstellt, wie Apollo GraphQL genutzt wird und wie man GraphQL mit Datenbanken verknüpft.

Ein einfacher GraphQL Query erstellen

Um eine GraphQL-Anfrage zu erstellen, benötigst du nicht mehr als einen Endpunkt, der GraphQL unterstützt, und das Verständnis dafür, was du von diesem Endpunkt abrufen möchtest. Wenn du zum Beispiel die Daten eines Blogs abrufen möchtest, könntest du eine Abfrage erstellen, die den Titel und den Autor jedes Blogbeitrags abruft.

query {
  posts {
    title
    author
  }
}

Die Rückgabe deiner Anfrage wird genau der Struktur deiner Anfrage entsprechen. Für jedes Feld, das du in deiner Anfrage angegeben hast, wird der entsprechende Wert in der Rückgabedatenstruktur bereitgestellt. Dies ist einer der Hauptgründe, warum GraphQL Anklang findet - die Möglichkeit, genau zu spezifizieren, welche Daten der Client vom Server erhalten soll.

Arbeiten mit Apollo GraphQL: Ein Anleitungsbeispiel

Apollo ist eine weit verbreitete Implementierung von GraphQL, die sowohl auf dem Server als auch auf dem Client eingesetzt werden kann. In diesem Beispiel schauen wir uns an, wie du Apollo Client verwenden kannst, um eine GraphQL-Abfrage an einen Server zu senden.

Zunächst musst du Apollo Client in deinem Projekt installieren. Das kannst du tun, indem du folgenden Befehl in der Kommandozeile deines Projekts ausführst:

npm install @apollo/client graphql

Nach der Installation kannst du Apollo Client in deinem Code einrichten. Hierfür benötigst du die URL deines GraphQL-Servers. Mit dieser URL kann Apollo Client dann eine Verbindung zum Server herstellen und Anfragen senden.

import {
  ApolloClient,
  InMemoryCache,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

client
  .query({
    query: gql`
      {
        posts {
          title
          author
        }
      }
    `
  })
  .then(result => console.log(result));

Es ist wichtig zu beachten, dass Apollo Client mehr bietet als nur die Möglichkeit, Abfragen zu senden. Mit Apollo Client kannst du auch Daten im Cache speichern, Pagination durchführen und sogar Client-seitigen Zustand verwalten. Apollo ist ein mächtiges Werkzeug in der GraphQL-Welt und wird in einer Vielzahl von Projekten eingesetzt.

Verknüpfen von GraphQL und Datenbanken

Eine der Schlüsselfunktionen von GraphQL ist die Fähigkeit, mit verschiedenen Datenquellen zu kommunizieren, einschließlich Datenbanken. Bei der Abfrage deines GraphQL-Servers gibt dieser die gewünschten Daten zurück. Aber woher kommen diese Daten? In den meisten Fällen kommen sie aus einer oder mehreren Datenbanken, die dein Server abfragt, wenn er eine Anfrage erhält.

Für die Kommunikation mit den Datenbanken werden sogenannte "Resolver" genutzt. Ein Resolver ist eine Funktion, die die Daten für ein bestimmtes Feld in deinem Schema bereitstellt. In einem Resolver könntest du zum Beispiel eine Datenbank-Abfrage ausführen, um die Daten zu erhalten, die du zurückgeben möchtest.

const resolvers = {
  Query: {
    posts: () => database.query('SELECT * FROM posts'),
  },
};

Die Fähigkeit, Resolver zu definieren und so Daten auf Abruf aus einer Datenbank oder anderen Datenquellen abzurufen, ist einer der Hauptgründe, warum Entwickler GraphQL so schätzen. Es erlaubt die zielgenaue Abfrage von Daten und sorgt somit für optimale Performance und Effizienz.

Tiefer in GraphQL: Schema und Resolvers

Um die Vorteile von GraphQL voll ausschöpfen zu können, ist es wichtig, die Konzepte, die hinter der Technologie stehen, zu verstehen. Zwei zentrale Aspekte beim Arbeiten mit GraphQL sind das Schema und die Resolver. Das Schema legt fest, welche Operationen (Queries, Mutationen und Subscriptions) der Client ausführen kann und welche Daten er bei den entsprechenden Anfragen erhält. Die Resolver sind dafür zuständig, die tatsächlichen Daten für die Anfragen aus den Datenquellen zu holen.

Das Grundgerüst: GraphQL Schema

Das GraphQL Schema ist das Herzstück jeder GraphQL API und definieren die Struktur der Daten, die der Client erhält. Es besteht aus verschiedenen Typen, die die verschiedenen Datenstrukturen der API repräsentieren.

Die Definition eines Schemas mit der Schema Definition Language (SDL) könnte folgendermaßen aussehen:

type Query {
  posts: [Post]
  post(id: ID!): Post
}

type Mutation {
  createPost(title: String, author: String): Post
}

type Subscription {
  newPost: Post
}

type Post {
  id: ID
  title: String
  author: String
}

Hier siehst du, wie die Abfragen, Mutationen und Entitäten definiert werden. Jeder Typ hat eine Reihe von Feldern, die ebenfalls Typen haben. Das erlaubt es GraphQL, die Struktur und die Typsicherheit der Daten zu garantieren. Für jedes Feld in einem Typ muss es einen Resolver geben, der im nächsten Abschnitt erklärt wird.

Die Praxis von GraphQL Resolvers

Resolver sind Funktionen, die für jeden Typ in einem Schema bestimmt sind. Jede Funktion liefert Daten für ein spezielles Feld. In gewisser Weise sind Resolver die Brücke zwischen den GraphQL-Typen im Schema und den Datenquellen, die die eigentlichen Daten liefern. Sie erweitern die Arbeit des Schemas, indem sie erklären, wie die Daten für die Felder geholt oder manipuliert werden.

const resolvers = {
  Query: {
    posts: () => database.get('posts'),
    post: (_, { id }) => database.get('posts').find(post => post.id === id),
  },
  Mutation: {
    createPost: (_, { title, author }) => {
      const post = { id: generateId(), title, author };
      database.get('posts').push(post);
      return post;
    }
  }
};

In der Praxis können Resolvers auf die Datenbank, eine REST-API, einen In-Memory-Speicher oder jede andere Datenquelle zugreifen. Da GraphQL sich auf die Abfragestruktur und -Syntax konzentriert, nicht auf die Datenquellen selbst, bist du in der Wahl deiner Datenquellen extrem flexibel. Mit anderen Worten, du kannst die besten Ausführungsstrategien für deine spezifischen Anforderungen erschließen.

Praxisanweisungen für den Bau eines effizienten GraphQL API

Die Erstellung einer GraphQL API erfordert Sorgfalt und Planung, um Fehler und ineffiziente Datenabrufe zu vermeiden. Ein gut gestaltetes Schema und effiziente Resolvers können dazu beitragen, Over- und Underfetching zu vermeiden, Verzoegerungen zu reduzieren und eine schnelle API-Antwortzeit zu gewährleisten.

Hier sind ein paar Techniken, die dabei helfen, eine effiziente GraphQL API zu gestalten:

• Verwendung des DataLoader von Facebook, um das N+1-Problem zu vermeiden und Datenlade-Operationen zu batchen und zu cachen.
• Bereitstellen detaillierter Fehlermeldungen, damit der Client genau weiß, was schief gelaufen ist. GraphQL hat integrierte Fehlerbehandlungsfunktionen, die genutzt werden sollten.
• Vermeidung übermäßiger Verschachtelung. Obwohl GraphQL Verschachtelung zulässt, kann zu viel davon die Abfragen verlangsamen und den Overhead erhöhen.
• Profiling deiner Resolvers, um zu erkennen, welche am meisten Zeit benötigen und möglicherweise optimiert werden sollten.

Zusammenfassend lässt sich sagen, dass das Erstellen einer effizienten GraphQL API eine Herausforderung sein kann, aber die Flexibilität und Kontrolle, die sie bieten, machen sie zu einer attraktiven Wahl für viele Entwickler.

Weiterführende Themen in GraphQL

Die mächtigen Konzepte von GraphQL enden nicht bei Queries, Mutationen und Subscriptions. Es gibt viele weiterführende Aspekte, mit denen du dein Wissen vertiefen und gleichzeitig deine Fähigkeiten als Entwickler erweitern kannst. Dazu gehören Themen wie die Erstellung von benutzerdefinierten Direktiven, Fehlerbehandlung, das Arbeiten mit Interfaces und Union Types sowie das Anwenden fortgeschrittener Konzepte der Webentwicklung mit GraphQL.

Möglichkeiten und Grenzen der Datenabfrage mit GraphQL

Während GraphQL viele mächtige Abfragefunktionen bietet, gibt es auch Grenzen, die du kennen solltest. Doese Grenzen sind notwendig, um die Serverperformance zu schützen und Missbrauch vorzubeugen.

Solche Beschränkungen können mithilfe von Tools zur Validierung und Analyse von GraphQL-Queries umgesetzt werden. Mithilfe dieser Tools kann der Server prüfen, ob eine Abfrage gültig ist und nicht die festgelegten Beschränkungen übersteigt, bevor sie ausgeführt wird.

Von der Theorie zur Praxis: Real Life Anwendung von GraphQL

Die wahre Kraft von GraphQL wird deutlich, wenn wir konkrete Anwendungsfälle betrachten. Große Unternehmen wie Facebook, GitHub und Airbnb nutzen GraphQL, um flexible und effiziente APIs für ihre Produkte zu schaffen.

GitHub zum Beispiel hat GraphQL genutzt, um seine öffentliche API zu überarbeiten. Mit GraphQL konnte GitHub viele verschiedenen API-Endpunkte in einer einzigen, einheitlichen Schnittstelle zusammenfassen. Das ermöglicht Entwicklern eine größere Flexibilität und Effizienz bei der Nutzung der GitHub-API.

query {
  user(login: "username") {
    repositories(first: 10) {
      edges {
        node {
          name
          ref(qualifiedName: "master") {
            target {
              ... on Commit {
                history(first: 10) {
                  edges {
                    node {
                      message
                      author {
                        name
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Mit GraphQL kann der Entwickler eine einzige, personalisierte Anfrage stellen und erhält genau die Daten, die er braucht, wodurch Over- und Underfetching vermieden werden.

GraphQL für fortgeschrittene Webentwicklung

GraphQL bringt viele Konzepte mit, die für fortgeschrittene Webentwicklung sehr nützlich sein können. Eines davon ist das Konzept der "direktiven". Mit Direktiven kannst du die Ausführung von Queries und Mutationen auf vielfältige Weise beeinflussen.

query($includeAuthor: Boolean!) {
  posts {
    title
    author @include(if: $includeAuthor)
  }
}

In der fortgeschrittenen Webentwicklung sind Direktiven ein mächtiges Werkzeug zur Modifizierung der Anfragen. Mit ihnen kannst du die Anfragen an deine speziellen Anforderungen anpassen.