GraphQL-Grundlagen für React-Entwickler

REST stellt Endpunkte mit fester Struktur bereit: GET /users/:id gibt unabhängig vom tatsächlichen Bedarf des Clients das gesamte Benutzerobjekt zurück. Mit GraphQL können Clients exakt die gewünschten Felder angeben. Dadurch werden Overfetching (zu viele Daten) und Underfetching (nicht genügend Daten, sodass mehrere Anfragen erforderlich sind) vermieden.

Mit einer einzigen GraphQL-Query können Sie einen Benutzer, seine Posts und den Autor jedes Posts in einem einzigen Roundtrip abrufen.

Jede GraphQL-API wird durch ein Schema definiert, das in der Schema Definition Language (SDL) geschrieben ist. Das Schema deklariert Typen und ihre Felder sowie die Root-Typen Query, Mutation und Subscription, mit denen Clients arbeiten können.

Das Schema ist der Vertrag zwischen Client und Server. Frontend- und Backend-Teams können parallel arbeiten, sobald das Schema vereinbart ist.

Eine GraphQL-Query wählt Felder aus: { user(id: "1") { name email posts { title } } }. Verschachtelte Felder bilden Beziehungen in einer einzigen Anfrage ab. Aliase benennen Felder um: { me: user(id: "1") { name } }. Fragments ermöglichen die Wiederverwendung von Feldauswahlen in mehreren Queries.

Variablen machen Queries wiederverwendbar: query GetUser($id: ID!) { user(id: $id) { name } } mit den Variablen: { id: "1" }.

Jedes Feld im GraphQL-Schema verfügt über eine Resolver-Funktion auf dem Server. Wenn ein Client user.name abfragt, ruft der user-Resolver das Benutzerobjekt ab und gibt der name-Resolver (oder der Standard-Resolver) das Feld name zurück.

Diese Auflösung auf Feldebene ermöglicht es GraphQL, genau die angeforderten Daten abzurufen.

Wenn Sie eine Liste mit 100 Posts abfragen und jeder Post seinen Autor enthält, führt eine naive Implementierung 100 separate Datenbankabfragen für die Autoren aus. Dieses N+1-Problem macht GraphQL-APIs ohne Optimierung langsam.

DataLoader löst das N+1-Problem, indem es alle Autorenabfragen mithilfe eines Request-bezogenen Caches und einer Batch-Funktion zu einer einzigen Datenbankabfrage bündelt.

Apollo Studio und GraphQL Playground sind browserbasierte Benutzeroberflächen, mit denen Sie eine GraphQL-API interaktiv erkunden können. Sie vervollständigen Felder anhand des Schemas automatisch, zeigen Abfrageergebnisse an und blenden Typdokumentation direkt ein.

Die Verwendung des Playgrounds ist der schnellste Weg, eine unbekannte GraphQL-API zu verstehen, bevor Sie Clientcode schreiben.

GraphQL-APIs stellen ihr eigenes Schema über eine Introspektionsabfrage bereit: { __schema { types { name } } }. Clients können das Schema selbst abfragen, um verfügbare Typen, Felder und Argumente zu ermitteln.

Codegenerierungstools wie graphql-codegen verwenden die Introspektion, um automatisch TypeScript-Typen zu generieren, die dem API-Schema entsprechen.

GraphQL-Mutationen ändern Daten: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. Subscriptions stellen eine persistente Verbindung (üblicherweise per WebSocket) her und senden Aktualisierungen: subscription { postAdded { id title } }.

Alle drei Root-Typen (Query, Mutation, Subscription) verwenden dieselbe Feldauswahlsyntax.

GraphQL eignet sich besonders für Anwendungen mit komplexen, verschachtelten Datenanforderungen, mehreren Clienttypen (mobil, Web, TV), die jeweils unterschiedliche Teilmengen von Feldern benötigen, oder sich schnell weiterentwickelnden APIs, bei denen die Außerkraftsetzung von Feldern gegenüber der Versionierung von Endpunkten bevorzugt wird.

REST ist einfacher für CRUD-APIs mit vorhersehbaren, flachen Ressourcenstrukturen und hervorragenden HTTP-Caching-Eigenschaften mithilfe von ETags und Cache-Headern.

Apollo Client ist der funktionsreichste GraphQL-Client: normalisierter Cache, lokale Zustandsverwaltung, Subscriptions und Links zur Fehlerbehandlung. URQL ist leichtgewichtiger und bietet einen Dokumentcache sowie eine einfachere API. React Query mit graphql-request ist der einfachste Ansatz für grundlegende Queries und Mutationen ohne ausgefeilte Caching-Funktionen.

Wählen Sie anhand Ihrer Caching-Anforderungen: einen normalisierten Cache für Entitäten, die über mehrere Queries hinweg gemeinsam genutzt werden (Apollo), oder einen einfacheren Dokumentcache für unabhängige Queries (URQL oder React Query).

Ein einfaches SDL: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }. Ausrufezeichen kennzeichnen Nicht-Null-Felder.

Dieses Schema zeigt dem Client genau, welche Felder für jeden Typ existieren und welche Queries verfügbar sind, und ermöglicht so typsichere Codegenerierung.

Was bedeutet „Overfetching“ im Kontext von REST und GraphQL?

Mit GraphQL können Clients mithilfe einer schemaspezifizierten Abfragesprache genau die benötigten Felder anfordern (kein Overfetching oder Underfetching). Resolver beantworten jedes Feld; DataLoader löst das N+1-Problem. Introspektion ermöglicht die Codegenerierung von TypeScript-Typen. Apollo Client, URQL und React Query sind die wichtigsten mit React kompatiblen GraphQL-Clients.

Wählen Sie GraphQL für komplexe, verschachtelte Datenanforderungen mit mehreren Clients und REST für einfaches CRUD mit vorhersehbaren Strukturen.