An­wen­dun­gen im Web nutzen APIs (Ap­pli­ca­ti­on Pro­gramming In­ter­faces), um Daten aus­zu­tau­schen und wei­ter­zu­ver­ar­bei­ten. Sollen also andere Services auf Daten Ihres Web­pro­jekts zugreifen können, müssen Sie eine solche Schnitt­stel­le ent­wi­ckeln und im­ple­men­tie­ren. Wie so oft gibt es auch hierfür einige eta­blier­te Standards wie SOAP oder REST (Repre­sen­ta­tio­nal State Transfer), die eine Grund­struk­tur für Ihr API vorgeben, die mit jeder gängigen Pro­gram­mier­spra­che pro­blem­los an­ge­steu­ert werden kann – ins­be­son­de­re letzt­ge­nann­te Ar­chi­tek­tur hat sich aufgrund ihrer Sim­pli­zi­tät in den ver­gan­ge­nen Jahren zur absoluten Premium-Lösung ent­wi­ckelt.

Doch auch wenn der Siegeszug der REST-Ar­chi­tek­tur durchaus be­ein­dru­ckend ist, gibt es dennoch in­ter­es­san­te Al­ter­na­ti­ven wie GraphQL, die ebenfalls zu über­zeu­gen wissen. Die Ab­fra­ge­spra­che und Lauf­zeit­um­ge­bung aus dem Hause Facebook kann durchaus mit SOAP und REST mithalten, wobei ihre Vorzüge unter anderem bei kom­ple­xe­ren Abfragen zum Tragen kommen.

IONOS Ent­wick­ler API
Verwalten Sie Ihre IONOS Hosting-Produkte über unsere leis­tungs­star­ken APIs
  • DNS-Ma­nage­ment
  • SSL-Ver­wal­tung
  • API-Do­ku­men­ta­ti­on

Was ist GraphQL?

GraphQL ist eine 2012 von Facebook ent­wi­ckel­te, SQL-ähnliche Ab­fra­ge­spra­che inklusive Lauf­zeit­um­ge­bung und Typsystem. Ur­sprüng­lich war sie aus­schließ­lich für den un­ter­neh­mens­in­ter­nen Einsatz vor­ge­se­hen. Hin­ter­grund war die Um­ge­stal­tung der nativen mobilen Facebook-Apps für iOS und Android, die aufgrund stei­gen­der Kom­ple­xi­tät zunehmend schwä­che­re Per­for­mance zeigten. Ins­be­son­de­re für die Aus­lie­fe­rung der Newsfeed-Daten musste der Groß­kon­zern eine adäquate Lösung finden, bei der das Ver­hält­nis zwischen ab­ge­ru­fe­nen In­for­ma­tio­nen und not­wen­di­gen Ser­ver­ab­fra­gen zu­frie­den­stel­lend war. 2015 machte Facebook den GraphQL-Quellcode frei verfügbar – zu diesem Zeitpunkt regelte er fast schon den gesamten Da­ten­zu­griff der mobilen Apps. Seit 2017 läuft das Projekt unter der freien OWFa-1.0-Lizenz (Open Web Foundation).

So funk­tio­niert GraphQL

Um die Funk­ti­ons­wei­se von GraphQL zu verstehen, ist es notwendig, sich mit den drei ele­men­ta­ren Kom­po­nen­ten aus­ein­an­der­zu­set­zen, die das Open-Source-Projekt aus­zeich­nen:

  • Ab­fra­ge­spra­che: In erster Linie be­schreibt das GraphQL-Konzept eine Ab­fra­ge­spra­che (Query Language), die Pro­gram­men den un­kom­pli­zier­ten Zugriff auf ein API er­mög­licht. Während andere Schnitt­stel­len-Ar­chi­tek­tu­ren nur sehr strikte Abfragen er­mög­li­chen, die oft lediglich den Zugriff auf eine einzelne Ressource gewähren, zeichnen sich GraphQL-Querys durch ein hohes Maß an Fle­xi­bi­li­tät aus. Diese zeigt sich konkret darin, dass es keine Li­mi­tie­rung für die Zahl ab­ge­frag­ter Res­sour­cen gibt, und dass gezielt definiert werden kann, welche Da­ten­fel­der abgefragt werden sollen. GraphQL erlaubt dabei sowohl lesende als auch schrei­ben­de bzw. ver­än­dern­de Abfragen vor.
  • Typsystem: GraphQL arbeitet außerdem mit einem eigenen Typsystem, das es Ihnen erlaubt, Ihr API durch Da­ten­ty­pen zu be­schrei­ben. Die auf diese Weise de­fi­nier­ten Da­ten­struk­tu­ren schaffen dann den ei­gent­li­chen Rahmen für Abfragen. Jeder Typ besteht dabei aus einem oder mehreren Feldern, die wiederum eigene Typ­an­ga­ben enthalten. Das auf diese Weise ge­schaf­fe­ne, in­di­vi­du­el­le System dient GraphQL dann als Ori­en­tie­rungs­punkt, um Anfragen va­li­die­ren und feh­ler­haf­te Querys ablehnen zu können.
  • Lauf­zeit­um­ge­bung: Schließ­lich liefert GraphQL auch ver­schie­de­ne Server-Lauf­zeit­um­ge­bun­gen zum Ausführen der GraphQL-Abfragen. Zu diesem Zweck stehen Bi­blio­the­ken für diverse Pro­gram­mier­spra­chen zur Verfügung – bei­spiels­wei­se Go, Java, Ja­va­Script, PHP, Python oder Ruby. Sie haben also nahezu freie Wahl hin­sicht­lich der Sprache Ihres per­sön­li­chen GraphQL-APIs. Die Lauf­zeit­um­ge­bung ist al­ler­dings aus­schließ­lich für die Um­wand­lung (Parsen) und Va­li­die­rung der Abfragen sowie für die Se­ria­li­sie­rung der Antworten (Um­wand­lung der Objekte in eine ent­spre­chen­de Bytefolge) ver­ant­wort­lich. Das Speichern und Ermitteln der Daten (z. B. in einer Datenbank) gehört zum Auf­ga­ben­be­reich Ihrer Web­an­wen­dung.

Im Zu­sam­men­spiel sorgen Ab­fra­ge­spra­che, Typsystem und Lauf­zeit­um­ge­bung für ein hoch­gra­dig wan­del­ba­res API-Gerüst. Das ist nicht nur plattform- und an­wen­dungs­über­grei­fend zu­gäng­lich, sondern lässt sich auch perfekt auf die Ei­gen­hei­ten Ihrer Web­ap­pli­ka­ti­on abstimmen: Sie können die GraphQL-Schnitt­stel­le also pro­blem­los in den Code Ihres Projekts in­te­grie­ren – un­ab­hän­gig davon, ob Sie bei­spiels­wei­se das Python-Framework Django, das Ruby-Framework Rails oder das Ja­va­Script-Framework Node.js nutzen.

Was zeichnet GraphQL aus?

Eines der Haupt­merk­ma­le von GraphQL ist die Sim­pli­zi­tät der Ab­fra­ge­spra­che, die Ent­wick­lern den Zugang zur Schnitt­stel­le so einfach wie möglich macht. Wer sich mit GraphQL aus­ein­an­der­setzt, der wird bei­spiels­wei­se schnell fest­stel­len, dass erhaltene Antworten eins zu eins die ge­stell­ten Abfragen wi­der­spie­geln. Aus­ga­be­for­mat ist dabei das glei­cher­ma­ßen schlanke wie ver­brei­te­te Ja­va­Script-Format JSON (Ja­va­Script Object Notation). Folglich ist das Ver­schi­cken einer pass­ge­nau­en Abfrage keine große Her­aus­for­de­rung, sofern Sie die Struktur der Daten kennen, die Ihre Anwendung benötigt, und diese in der Query for­mu­lie­ren. Zu­sätz­lich zur einfachen Er­stel­lung von Abfragen zeichnet sich GraphQL ins­be­son­de­re durch folgende Ei­gen­schaf­ten aus:

  • Hier­ar­chi­sche Struktur: Da­ten­be­stän­de, die über GraphQL-APIs abrufbar sind, haben eine hier­ar­chi­sche Struktur. Au­to­ma­tisch lassen sich Be­zie­hun­gen zwischen den einzelnen Objekten erzeugen, auf deren Basis auch komplexe Anfragen in einem einzigen Request for­mu­liert (und be­ant­wor­tet) werden können. Ein Austausch mehrerer Nach­rich­ten zwischen Server und Client (auch „Round Trips“ genannt) ist nicht notwendig. Diese Da­ten­hier­ar­chie ist ins­be­son­de­re für gra­phen­ori­en­tier­te Da­ten­ban­ken wie Ja­nus­Graph geeignet und für Benutzer-In­ter­faces, die meist ebenfalls hier­ar­chisch aufgebaut sind.
  • Starke Ty­pi­sie­rung: Jede Ebene einer GraphQL-Abfrage ent­spricht einem be­stimm­ten Typ, wobei jeder Typ ein Set ver­füg­ba­rer Felder be­schreibt. Dieses Typsystem kann al­ler­dings noch mehr als au­to­ma­tisch fest­stel­len, ob eine Abfrage korrekt oder nicht korrekt for­mu­liert ist: Denn wie SQL kann auch GraphQL dank der strikten Ty­pi­sie­rung bereits während der Ent­wick­lung bzw. vor Ab­schi­cken der Query be­schrei­ben­de Feh­ler­mel­dun­gen aus­spie­len.
  • Fle­xi­bi­li­tät: GraphQL er­mög­licht Ihnen, flexible Abfragen zu starten. Darüber hinaus eröffnet es Ihnen aber auch eine Reihe von Frei­hei­ten und Vorteilen bei der Ent­wick­lung bzw. Anpassung Ihrer Schnitt­stel­le. So sind ser­ver­sei­tig in der Regel nur wenige An­pas­sun­gen vor­zu­neh­men, wobei das Ent­wick­ler­team voll­kom­men un­ab­hän­gig von dem Team agieren kann, das für die Client-Kom­po­nen­te ver­ant­wort­lich ist. Ferner können sämtliche Ver­än­de­run­gen oder Er­wei­te­run­gen des APIs ohne Ver­sio­nie­rung durch­ge­führt werden, da sich zu­sätz­li­che Felder pro­blem­los und ohne Be­ein­träch­ti­gung exis­tie­ren­der Clients hin­zu­fü­gen lassen.

GraphQL vs. REST – Was un­ter­schei­det die beiden API-Konzepte?

Eingangs ist der große Erfolg von REST im World Wide Web bereits ebenso zur Sprache gekommen wie die Tatsache, dass GraphQL eine ernst­zu­neh­men­de Al­ter­na­ti­ve zu dieser eta­blier­ten HTTP-basierten und res­sour­cen­ori­en­tier­ten Ar­chi­tek­tur für Web­ser­vices ist. Möglich gemacht hat das ins­be­son­de­re eine Ent­wick­lung, die Facebook überhaupt erst zu der Kon­zi­pie­rung von GraphQL bewegt hat: Die steigende Bedeutung und zu­neh­men­de Kom­ple­xi­tät mobiler Web­ap­pli­ka­tio­nen – denn ins­be­son­de­re bei diesen An­wen­dun­gen für Android, iOS und Co. zeigt sich die große Stärke von GraphQL als API-Basis: Man kann mit einer einzigen Query Zugriff auf alle ge­wünsch­ten Daten erhalten.

Die GraphQL-Ser­ver­in­stanz liefert dabei exakt die in der Abfrage de­fi­nier­ten In­for­ma­tio­nen aus, sodass weder mehr noch weniger Daten als benötigt über die Schnitt­stel­le versendet werden. Bei ver­gleich­ba­ren REST-APIs können Sie immer nur einen be­stimm­ten Datensatz pro Query abfragen, woraufhin dieser komplett aus­ge­ge­ben wird. Im direkten Vergleich „GraphQL vs. REST“ erweist sich das Ab­fra­ge­kon­zept von Facebook als we­sent­lich präziser und ef­fi­zi­en­ter, was der Per­for­mance Ihrer Ap­pli­ka­ti­on zu­gu­te­kommt. Diese zahlt sich wiederum ins­be­son­de­re für Nutzer mobiler Geräte aus, denen oft nur leis­tungs­schwä­che­re In­ter­net­ver­bin­dun­gen zur Verfügung stehen.

Während aus der Freiheit bei der Da­ten­ab­fra­ge von GraphQL ei­ner­seits viele positive Merkmale re­sul­tie­ren, kann sie an­de­rer­seits jedoch auch zum ernst­haf­ten Si­cher­heits­pro­blem werden: Vor allem, wenn Sie offene APIs anbieten wollen, bei denen Sie das Ab­fra­ge­ver­hal­ten von Dritt­an­bie­ter-Clients nicht kon­trol­lie­ren können. So ist es möglich, dass eine zu hohe Zahl an Querys den Server zum Absturz bringt (ab­sicht­lich oder un­ab­sicht­lich). Ein der­ar­ti­ges Szenario, vor dem Sie sich ent­spre­chend schützen müssen, droht Ihnen beim Einsatz einer REST-API nicht so schnell. GraphQL im Backend so um­zu­set­zen, dass es per­for­mant und sicher läuft, ist also we­sent­lich schwie­ri­ger.

Zudem ist auch die Im­ple­men­tie­rung eines Caching-Ver­fah­rens für nicht ver­än­der­li­che Abfragen mit GraphQL erheblich kom­pli­zier­ter als für Abfragen über eine REST-Schnitt­stel­le. Letztere lassen sich durch die Caching-Methoden der HTTP-Spe­zi­fi­ka­ti­on zwi­schen­spei­chern (bei­spiels­wei­se im Browser).

GraphQL-Tutorial: Einstieg und GraphQL-Beispiel

GraphQL lässt Ihnen dank des großen Angebots an ein­satz­be­rei­ten Bi­blio­the­ken großen Spielraum bei der Wahl der zu­grun­de­lie­gen­den Pro­gram­mier­spra­che. Das ist auch einer der großen Vorzüge bei der Im­ple­men­tie­rung einer GraphQL-Schnitt­stel­le in Ihre App. So können Sie bei­spiels­wei­se als Python-Fan auf die Graphene-Bi­blio­thek zu­rück­grei­fen – oder mit der Bi­blio­thek graphql-java arbeiten, wenn Ihr Projekt auf Java basiert. Stützt sich Ihre Web­an­wen­dung auf die Ja­va­Script-Lauf­zeit­um­ge­bung Node.js, eignet sich unter anderem GraphQL.js als Basis für die Im­ple­men­tie­rung.

Hinweis

Eine Auf­lis­tung ver­füg­ba­rer GraphQL-Bi­blio­the­ken und Client-An­wen­dun­gen für diverse Pro­gram­mier­spra­chen finden Sie auf der of­fi­zi­el­len GraphQL-Homepage.

Im folgenden GraphQL-Tutorial erläutern wir Ihnen ex­em­pla­risch den Einstieg und die ersten Schritte mit dem API-Framework für eine Ja­va­Script-Anwendung, wobei zu­sätz­lich zur letzt­ge­nann­ten GraphQL.js-Bi­blio­thek auch das Web-Framework Express zum Einsatz kommt.

Schritt 1: In­stal­la­ti­on der Bi­blio­thek

Um GraphQL-Bi­blio­the­ken nutzen zu können, müssen Sie diese zunächst in­stal­lie­ren. Bei der Ja­va­Script-Bi­blio­thek GraphQL.js nutzen Sie dafür den Ja­va­Script-Pa­ket­ma­na­ger npm (Node Package Manager) und folgenden Befehl:

npm install --save graphql

Al­ter­na­tiv können Sie die Bi­blio­thek auch über den unter anderem von Facebook (über­wie­gend) und Google ent­wi­ckel­ten Paket- und Ab­hän­gig­keits­ma­na­ger Yarn beziehen:

yarn add graphql

Vor­aus­set­zung ist in beiden Fällen natürlich, dass eine aktuelle Version von Node.js in­stal­liert ist (empfohlen: Node v6.0.0 oder höher).

Schritt 2: Das erste Abfrage-Schema

Damit Ihre Anwendung GraphQL-Abfragen ver­ar­bei­ten kann, benötigen Sie ein Schema, das den Typ „Query“ (also Abfrage) definiert sowie den Zu­gangs­punkt zu Ihrer Schnitt­stel­le (auch API-Root genannt) inklusive Resolver-Funktion. Für eine einfache GraphQL-Beispiel-Schnitt­stel­le, die lediglich die Nachricht „Hallo Welt!“ ausgibt, sähe der passende Code in der zu diesem Zweck an­ge­leg­ten Datei server.js fol­gen­der­ma­ßen aus:

var { graphql, buildSchema } = require('graphql');
// Konstruiere Schema auf Basis des GraphQL-Konzepts
var schema = buildSchema(`
type Query {
hello: String
     }
`);
// API-Root stellt eine Resolver-Funktion für jeden zugreifenden Endpunkt zur Verfügung
var root = {
hello: () => {
return 'Hallo Welt!';
    },
};
// Führe GraphQL-Abfrage '{ hello }' aus und spiele entsprechende Antwort aus
graphql(schema, '{ hello }', root).then(response => {
console.log(response);
});

Führen Sie diesen Code nun mit Node.js aus, indem Sie den Befehl

node server.js

in das Terminal eingeben, sollten Sie folgende Nachricht erhalten:

{ data: { hello: 'Hallo Welt!' } }

Schritt 3: Der eigene GraphQL-Server auf Express-Basis

Nachdem Sie im vor­an­ge­gan­ge­nen Schritt eine einfache Abfrage erstellt und über die Kom­man­do­zei­le aus­ge­führt haben, ist es nun an der Zeit, einen GraphQL-API-Server zum Laufen zu bringen. Dadurch lässt sich die Schnitt­stel­le bei­spiels­wei­se über einen ge­wöhn­li­chen Web­brow­ser erreichen. Zu diesem Zweck in­stal­lie­ren Sie zunächst das eingangs erwähnte Ap­pli­ka­ti­ons-Framework Express sowie die ebenfalls benötigte Bi­blio­thek express-graphql mit folgendem Befehl:

npm install express express-graphql --save

An­schlie­ßend mo­di­fi­zie­ren Sie das „Hallo Welt”-GraphQL-Beispiel so, dass es anstelle eines einfachen Skripts zur Basis Ihres GraphQL-Servers wird. Zu diesem Zweck im­ple­men­tie­ren Sie das Express-Modul und nutzen die express-graphql-Bi­blio­thek, um den API-Server am HTTP-Endpunkt „/graphql“ ein­zu­bin­den:

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// Konstruiere Schema auf Basis des GraphQL-Konzepts
var schema = buildSchema(`
     type Query {
                 hello: String
     }
`);
// API-Root stellt eine Resolver-Funktion für jeden zugreifenden Endpunkt zur Verfügung
var root = {
     hello: () => {
                 return 'Hallo Welt!';
     },
};
var app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}));
app.listen(4000);
console.log('GraphQL-API-Server auf localhost:4000/graphql ausführen');

Wie im vorigen GraphQL-Beispiel öffnen Sie die server.js-Datei nun mit Node.js – mit dem Un­ter­schied, dass Sie dieses Mal nicht eine einfache Abfrage ausführen, sondern Ihren API-Server starten:

node server.js

Im Code des GraphQL-Express-Servers sind nicht nur Schema und Root-API spe­zi­fi­ziert, sondern es ist auch der HTTP-Endpunkt „/graphql“ auf­ge­führt. Durch den Eintrag „graphiql: true“ ist unter anderem das gleich­na­mi­ge Tool aktiviert worden, das Ihnen die Eingabe von Querys über ein gra­fi­sches Benutzer-Interface er­mög­licht. Öffnen Sie dazu einfach Ihren Browser und geben Sie die folgende Adresse ein:

http://localhost:4000/graphql

Nachdem Sie in den ver­schie­de­nen Schritten dieses GraphQL-Tutorials die not­wen­di­gen Kom­po­nen­ten in­stal­liert, Ihr erstes Abfrage-Schema erstellt und den eigenen Server gestartet haben, können Sie sich danach also in aller Ruhe mit den Query-Ein­ga­be­mög­lich­kei­ten vertraut machen.

Weitere In­for­ma­tio­nen hierzu sowie aus­führ­li­che Er­klä­run­gen zur Ge­stal­tung von GraphQL-Backends und -Frontends finden Sie im Tu­to­ri­al­be­reich auf der of­fi­zi­el­len Homepage des Facebook-API-Konzepts.

Zum Hauptmenü