Die Graph QL

Webdevelopment Nov 19, 2019

Ich habe für mich schon lange beschlossen GraphQL zu verwenden, jedoch noch nicht die richtige Zeit dazu gefunden. Daher beschließe ich auch hier eine kleine Reihe zu erstellen wie ich meine Erfahrungen damit sammel.

Was War

In der Vergangenheit waren die Themen in der IT vielfältig. WEbdienste wurden früher hoch gelobt. Ich bin auch noch zu einer Zeit herangewachen in der es noch Service Orientierte Anwendungen (SOA) existierten und als State of the Art bezeichnet wurden.

SOA

Früher war es auch immer so, dass ein Web-UI auch exklusiv nur eine API besaß. Diese Api hat dann die Datenbank befragt, oder aber auch mal andere Schnittstellen.

Was jetzt?

Durch den Grundstein ist nun die Kommunikation zwischen Anwendung und Datenschicht nur über Dienste möglich gemacht. Ab und an kam es aber vor das die Dienste stark belastet wurden und somit auch andere Benutzer eine enorme Latenz bemerkten. Beispielsweise dadruch, dass ein Import getätigt wurde und eine rechenintensive Nachbearbeitung erfolgte.

Daher musste eine Skalierung her.

Früher wurde einfach ein größerer Server hingestellt und gut war. Heute ist es aber anders. Denn in zeiten der Cloud ist es nun möglich partiell einfach nur Speicher, oder aber auch Rechenpower hinzuzubuchen oder (was auch wichtiger ist) wieder abbuchen.

Die Skalierung muss aber dann auch nur für bestimmte Prozesse durchgeführt werden, die Geburtsstunde der Microservices war da.

Der Sinn war, dass viele kleine Dienste erstellt wurden, die zu einem Gesamtsystem gehören, aber durch die (quasi) unabhängigkeit auch dediziert Skaliert wurden. So ist ein Szenario wie oben, auch kein Problem mehr, denn die Dienste für einen Import liegen auf einen anderen Dienst als die für die Abfrage von Daten o.ä.

Die GraphQl

Jetzt da wir verschiedene Dienste haben, konnte man machen was man will, jetzt ist es aber auch so, dass man sich nicht unbedingt von anderen Schnittstellen oder Systeme abhängig machen will. Beispielsweise von externen Dienstleistern. Denn das würde ein Eingriff in den Quellcode bedeuten.

Dadruch das jetzt einzelne Dienste entstehen, kann nun beliebig vieles zusammen aggregiert werden. Doch das gestaltet sich meist in einer wüsten Abfrageschlacht, die oft inperformant wird.

Hier kommt ein neuer Kandidat die Graph API zur Rettung. Quasi kann man sehen das wir wieder zurück zu einer APi gehen, jedoch ist die GraphQL oftmals nur eine Konfiguration, so dass ein Aggregat entsteht.

Beispiel:

Will man Produkte und dessen Warengruppen zusammen als Dienst ausgeben. So war es früher nur über zwei verschiedene Abfragen möglich. Alternativ kann ein neuer Microservice erstellt werden, der das durchführt.

GraphQL kann sowas aber direkt übernehmen und dass meist ohne Entwicklung.

Die Installation

GraphQl wird mittels Node.Js betrieben. Somit müssten wir erstmal ein Grundstein legen. In einem Verzeichnis der Wahl ist somit folgender Befehl:

npm init

Damit wird eine Package.json erstellt. Diese Datei müssen wir noch mal bearbeiten und uns ein eigenes Start Skript erstellen, damit wir später auch unseren eigenen GraphQL Server testen können.

{
  "name": "graphql-local-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "babel-node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"
  }
}

Babel Installation

Als nächstes müssen wir noch das Tool Babel installieren.

npm install babel-cli babel-preset-env

Anschließend müssen wir im Hauptverzeichnis eine Datei mit Namen .babelrc erstellen. In dieser Datei muss dann folgende Grundkonfiguration eingefügt werden.

{
  "presets": [
    "env"
  ]
}

Installation & Konfiguration von Graph QL

Nun da die Grundsteine gelegt sind, können wir anfangen Graph QL zu installieren. Dazu muss erstmal das NPM Paket installiert werden.

npm install graphql-yoga

Jetzt ist noch ein Verzeichniss mit den Namen src zu erstellen, falls es noch nicht existiert.

mkdir src

In diesem Verzeichniss ist eine Datei mit Namen index.js zu erstellen. Der Inhalt dessen sieht wie folgt aus.

import { GraphQLServer } from 'graphql-yoga'

//Type definations  (Application Schema)
//Describes the operations and the data structures.

const typeDefs = `
    type Query {
        hello: String!
    }
`

//Resolvers object for our API
// These are the functions that acutally run when various oprations are performed.

const resolvers = {
    Query: {
        hello() {
            return "Hello World!"
        }
    }
}

const server = new GraphQLServer({
    typeDefs,
    resolvers
})

server.start(()=>{
    console.log('The Sever is up!')
})

Fertig nun kann schon getestet werden

Erster Test

Wir Starten den Server nun mit

npm run start

Anschliessend kann lokal der Server mit http://localhost:4000/ (opens new window)aufgerufen werden.

Es erscheint auch direkt ein Editor (Auch Playground genannt) mit dessen dann die Abfragen gestellt werden können.

Playground

Die erste Abfrage

Im oberen Beispiel haben wir in der index.js auch schon unsere erste mögliche Abfrage eingebaut. Der Erste Test kann also starten. Wir öffnen also den Playground und geben folgendes ein

query {
    hello
}

Nach dem Senden erhalten wir folgendes als Ergebnis

{
  "data": {
    "hello": "Hello World!"
  }
}

Dies Spiegelt den vorgegebenen Verhalten unseres Servers wider. Final sollte unsere Struktur wie folgt aussehen.

Finale Struktur

Aussicht

Ich werde in nächster Zeit diesen Dienst etwas weiter ausschmücken. Da wird auch ein Beispiel beschrieben, wie unterschiedliche Dienste Aggregiert werden, oder wie eine Absicherung (vor unbefugte Zugriffe) geschehen kann.

Tags